CODEWITHSUNDEEP
ioscssscroll
Julien Tessier
Julien Tessier

Reputation: 71

iOS: wrong element is being scrolled

I came across a weird scrolling issue on iOS (7 or 8) shown on www.cahri.com/tests/scroll

How to reproduce?

  1. Open the example page on an iPhone/iPad/iOS Simulator in landscape
  2. Touch with your right thumb the main content (right side) and scroll up or down
  3. Release your right thumb
  4. Touch with your left thumb the left side (which is a div with overflow: scroll) and try to scroll: the page scrolls instead of the div. Release your left thumb.
  5. It may take a couple of tries to reproduce, please get back to 2 if the page is not scrolling.
  6. Touch again with your left thumb the left side, now it scrolls correctly

Would you have any idea what is causing the issue? And how would one fix this issue?

Upvotes: 0

Views: 947

Answers (1)

Alex
Alex

Reputation: 5278

iOS web browsers still run into issues with fixed positioned elements (as is your left div) and scrolling. In the many web projects I have done this seemingly always causes issues/bugs that are somewhat inexplainable. I know this is not an exact answer, but I'm just sharing that I've been down this road before :)

Best solution is to either use a method that gets away from fixed positioning and scrolling for mobile devices or a third party scroll library like: http://cubiq.org/iscroll-5

I've had a lot of success with them on iOS devices.

If you wanted a different solution for mobile, you could use media queries to change positioning on elements.

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

Upvotes: 1

Related Questions