Open Radar

 
Summary:
Imagine a carousel that is 5000px long, each item is about 200px wide, and the container around it is iPad width (768 or 1024 with -webkit-overflow-scrolling: touch) applied to it.

Swipe to the left and release and the div scrolls automatically. Interrupt that scrolling with a touch on the screen, and events are fired incorrectly.

If five products were shown on the screen when iOS/Mobile Safari took over scrolling after touchend, the subsequent touch that stops the scrolling fires events on the five initial products and not whatever is being displayed when the user touches the screen. This can cause events to fire on elements thousands of pixels off the screen.

Steps to Reproduce:
Create a div with a fixed width, webkit-overflow-scrolling: touch applied, and place inside it another div of significantly larger width with many linked images inside of it. Swipe the div to cause it to begin to scroll and then tap and release on an image before scrolling loses all momentum (before the final scroll event is fired signifying completion of the scrolling action). The event will be fired on the wrong item, notably whichever item was under that pixel coordinate when iOS took over scrolling.

Expected Results:
That Mobile Safari check and adjust the DOM once scrolling has been interrupted before calculating which object is under the finger that interrupted the scrolling.

Actual Results:
Wrong element receives the touch event, navigation goes to the wrong page. In some cases the scrolled element actually jumps back to the position it was in before scrolling began on touch.