iOS: Incorrect element is currently being scrolled by the user

I encountered an unusual scrolling problem on iOS (7 or 8) while browsing www.cahri.com/tests/scroll

How can you replicate this issue?

  1. Visit the example page on your iPhone/iPad/iOS Simulator in landscape mode
  2. Use your right thumb to touch and scroll the main content (right side)
  3. Release your right thumb
  4. Now, use your left thumb to touch the left side (which is a div with overflow: scroll) and attempt to scroll. Instead of the div, the entire page scrolls. Release your left thumb.
  5. If the issue doesn't occur immediately, repeat steps from 2 until it does.
  6. Try touching the left side again with your left thumb, it should now scroll correctly.

Any insights on what might be causing this problem? How can it be resolved?

ioscssscroll

Answer â„–1

When it comes to iOS web browsers, fixed positioned elements like your left div can sometimes cause trouble with scrolling. In my experience with various web projects, I've encountered issues and bugs that are hard to explain. While I don't have a perfect solution, I just wanted to share that I've faced similar challenges before :)

One possible approach is to avoid fixed positioning and scrolling for mobile devices altogether or consider using a third-party scroll library such as .

In my personal use, these libraries have been quite effective on iOS devices.

Alternatively, if you prefer a different mobile solution, you could utilize media queries to adjust the positioning of elements based on screen size.

@media screen and (max-width: 600px) {
  .column-left { ... }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize CSS scrolling to present all items in a single line

Looking to showcase images in a horizontal line with scroll functionality? Unsure of how to achieve this and would really appreciate some guidance. CSS .img { max-width: 400px; position: relative; } .animal { float: left; background-color: #fff; ...

css

What is the reasoning behind Xcode generating specific app IDs labeled as "XC Wildcard" instead of using wildcard app IDs?

After removing all of my app IDs and provisioning profiles from Apple's Developer site, I decided to create a new Xcode 7.3.1 project. When faced with the "no matching provisioning profiles found" message, I clicked on "Fix Issue". Interestingly, the ...

iosxcode

In Internet Explorer, the toggle div expands to fill the available space, but this behavior is not consistent in

Utilizing the toggle function in jQuery, I created a mechanism to switch between 4 different blocks of content. You can view a demonstration of how the functionality operates correctly in Google Chrome here: If you encounter any issues with the functiona ...

jqueryhtmlcss

What is the best way to determine font size based on the width of the

In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold. However, simply setting the ...

cssfonts

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Display flash messages consistently in a designated area on the webpage instead of appearing at the top of the page in Flask

{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...

pythonhtmlcssflask

Getting 100% height on floated neighboring divs: Tips and tricks

​<div id='container'> <div class='left'></div> <div class='right'></div> <div class='clear'></div> </div>​​​​​​​​​​​​​​​​â ...

htmlcss

Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid. While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox. I have considered using absolute positioning ...

cssfirefoxbootstrap-4microsoft-edge

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

Tips for adjusting the color of multi-line text when hovering with the mouse

I'm facing a challenge in changing the color of text when someone hovers over it, but so far I've only been able to make it work if the mouse scrolls over the top border of the text. The text I'm testing is located in the top left corner an ...

javascripthtmlcss

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face. Initially, I had something like this placed inside t ...

htmlcssw3c-validation

Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to have my text show up as I scroll? I came across this , but I'm interested in how it actually functions. I saw a similar inquiry before, but it doesn't make sense to me. Can someone please explain or provide some examples on how ...

javascriptjqueryhtmlcss

Designing hover-activated submenus and ensuring they appear at the forefront

I am currently utilizing jquery to implement a dropdown submenu on hover action. Here is the structure of the code: <div id="menucontainer"> <ul id = "topmenu"> <li><a onmouseover="javascript:show('div_1');">menu_1 ...

jqueryhtmlcss

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

javascriptjqueryhtmlcss

Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...

htmlcsstwitter-bootstrapjsf

Change the color of the navbar when scrolling using bootstrap and jquery

Using Bootstrap to design a navigation bar, I have two main goals: I want the navbar to change color when the page is scrolled down by 20%, and then revert back to its original color when scrolling back to the top. When the collapse featu ...

javascriptjqueryhtmlcssbootstrap-4

Height of Parent Div minus Margin Top equal to 100%

I am working on a layout that requires three divs with different heights and header sizes to be positioned 100% from the top of their parent, while taking into account the height of the headers. I could use jQuery to achieve this, but since it's a res ...

csscalc

What is the best way to hide the jQuery modal I created?

Hello everyone! Currently, I am working on coding a simple JS modal that can be opened and closed smoothly. The issue I am facing is related to adding a click function to (.black-overlay) in order to fade out everything and close the modal. <div class ...

javascriptjqueryhtmlcsszurb-foundation

Is it possible to insert a second NSTextAttachement image into a UILabel?

I was attempting to include an image inside a UILabel along with text. I utilized NSTextAttachment to insert the image at the end of the UILabel text. I had to subclass it to adjust the size of the image to fit my text. Now, I'm looking to add anothe ...

iosobjective-cnsattributedstringnstextattachment