Bug 106918 – -webkit-overflow-scrolling:touch; destroys container structure and also does not fire any event on decceleration phase

• Status: UNCONFIRMED
• Component: Layout and Rendering

[Jurek R.]

Tested with iPad 4 iOS 6.01 Safari.

If you use the css entry "-webkit-overflow-scrolling:touch;" on a html5 webpage, where the outer container also contains other elements beside this scrolling element, the layer structure will be destroyed and also the other neighbour elements will be scrolled, no matter what positioning css they have. This happens only on decceleration phase.

Also if the touchevent stops after releasing the finger from the screen, there is a decceleration phase that does NOT FIRE ANY event on progress. So it's also not possible to fix the buggy behaviour by repositioning the elements on every step.

The only workaround for this is to deactivate this buggy feature, using "-webkit-overflow-scrolling:auto" instead.

So there is the need for three things:

1. a correct behaviour of -webkit-overflow-scrolling:touch, that only the the addressed element will scroll, no neighbour elements inside the same outer container

2. a correct behaviour of -webkit-overflow-scrolling:touch, that there will be no html structure changed after an element with this css appeared. This is essential for ajax/html5 reloading pages.

3. One new event that fire on every step of the decceleration phase (the phase that starts when the finger left the screen). For example the event "scroll".


Thanks. Please fix it. Or workarounds for this bug will be soon very common and it's not possible to establish a correct behaviour without breaking pages.