Chrome Browser for Android no longer supports -webkit-overflow-scrolling? Is there an alternative?

Question

I updated to the newest version of Chrome for Android on my Nexus 7 tablet and ...

-webkit-overflow-scrolling: touch

... no longer works. I

Answer 1

Try adding z-index: 0 to the element with overflow: scroll to create a stacking-context that provides a hint to Chrome to use the fast-scrolling code path.

Background:

I am currently experiencing this issue after updating to the latest version of Chrome for Android. This was also compounded for me by the fact that due to this change the current Modernizr test for this feature now returns false, so my CSS styles were not being applied.

Digging around I found another issue that discusses the support for overflow scrolling touch:

Tien-Ren observed while debugging 162363 that -webkit-overflow-touch is an inherited property. So the behavior of setting z-index: 0 on all non-hidden elements with that property creates a cascade of stacking contexts below it. (This behavior, behind ENABLE_ACCELERATED_OVERFLOW_SCROLLING, is currently enabled only on Android.) The obvious fix would be to set z-index: 0 on only "overflow: scroll" elements.

So it would seem that if you are having issues with the scrolling not working as expected then adding z-index: 0 to the element with overflow: scroll then this may help. However this did not work for me, although the scrolling sections worked (after I had modified the Modernizr css-overflow-scrolling test to return true for this version of Chrome) the momentum effect of the scrolling was not present.