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. In addition, the following evaluates to false:

!!('WebkitOverflowScrolling' in document.documentElement.style)

Was support for overflow scrolling removed from more recent builds of Chrome for Android? Is there an equivalent or comparable alternative momentum scrolling mechanism (not iScroll, etc.) that I can use found in the newest version?

As well, I searched for Chrome Beta in the Play Store on my device and it does not come up in the search results. Maybe the beta version is not offered for Nexus 7 tablets?

Any help on this matter is much appreciated. It's very frustrating that Google appears to have removed this feature from their browser ....

edit:

Detailed version information:

Nexus 7 tablet running Android version 4.2.2

-webkit-overflow-scrolling: touch;

and

!!('WebkitOverflowScrolling' in document.documentElement.style)

• Works and evaluates to true on Chrome version 18.0.1025469
• Does not work and evaluates to false on Chrome version 26.0.1410.58

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.

Answer 2

From this URL = https://code.google.com/p/chromium/issues/detail?id=175670&q=overflow-scrolling&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

' No, I think this was indeed triggered by 172481. We removed -webkit-overflow-scrolling with the hopes that it was no longer necessary because we'd automatically opt-in to fast scrolling when we need. The problem is that it isn't happening here.

Those SP changes you mentioned probably won't affect this issue because they won't show up on a non-corp account, right? I think everything works fine with corp but I'll check. '

Answer 3

A dirty solution that worked for me (required Hammer js):

  Hammer($('body')[0]).on("dragup", function(ev) {
            window.scrollBy(0,ev.gesture.distance);
        });
         Hammer($('body')[0]).on("dragdown", function(ev) {
            window.scrollBy(0,-ev.gesture.distance);
        });

Answer 4

we had scroll problems with on Chrome 40.0... on Android (tablet & mobile) and we fixed with css only solution. Maybe it is not clean but works for us:

    @media screen and (max-width: 1024px)
html, body {
    z-index: 0 !important;
    overflow: scroll !important;
    }
}