0

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?

Julien Tessier
  • 71
  • 1
  • 4
  • 2
    Moving answer below. – Alex Nov 10 '14 at 07:43
  • this is a really old iOS issue. Never get fixed. See [this](http://stackoverflow.com/questions/7763458/ios5-webkit-overflow-scrolling-causes-touch-events-stopping-work?rq=1) happens in iOS 5, and [this](http://stackoverflow.com/questions/18736297/webkit-overflow-scrolling-touch-broken-for-initially-offscreen-elements-in-i) in iOS 7. – Raptor Nov 10 '14 at 07:48

1 Answers1

1

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 { ... }
}
Alex
  • 5,298
  • 4
  • 29
  • 34
  • one more thing, OP forgets to set viewport properly. – Raptor Nov 10 '14 at 07:48
  • Thanks @Alex, thing is I had performance issue with iScroll 5, hence the need to stick to native iOS scrolling. The example page is a trimmed down version of my page with minimal content, just enough to reproduce the issue. I added the viewport but it didn't solve anything. – Julien Tessier Nov 10 '14 at 07:58
  • Sure. The viewport is simply meant as a reference for if you wanted to do something different than fixed positioning for that left column. I'd give iScroll another try unless the issue was pretty big since it's been able to handle a lot on my end. – Alex Nov 10 '14 at 07:59