Saturday, May 4, 2013

Google Chrome on Android,–webkit-overflow-scrolling and Modernizr.overflowscrolling

Google Chrome Logo
This morning I decided to install the latest version of Google Chrome for Android (26.0.1410.58), and test some work I had been doing on converting a website from using iScroll to overflow: scroll and –webkit-overflow-scrolling: touch. Imagine my surprise when I saw that none of my scrolling sections worked any more.
Investigating the issue it seemed that the Modernizr test for this support was now returning false. Digging into that it seemed that the underlying feature detection test was now returning false, which is represented in this javascript snippet:
!!('WebkitOverflowScrolling' in document.documentElement.style)
Which meant that the CSS I was using to enable the scrolling was not being applied by the browser, as it looked like this:
.overflowscrolling .my-scroller {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
This issue has been reported on Stack Overflow here.

More detail about what has changed is revealed in this Chromium issue comment, dated Feb 12:

https://code.google.com/p/chromium/issues/detail?id=175670#c4
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.
So it would seem that support for –webkit-overflow-scrolling had been removed from the code at this point.

Here is another issue that discusses the support for overflow scrolling touch:

http://code.google.com/p/chromium/issues/detail?id=128325#c23
Tien-Ren observed while debugging 162363 that -webkit-overflow-touch is an inherited property.  So the behavior of setting zindex: 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 zindex: 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 zindex: 0 to the element with overflow: scroll then this may help. However this did not work for me, although the scrolling sections worked (with my modified Modernizr test detailed below) the momentum effect of the scrolling was not present.

This comment from Jan 8 seems to suggest that –webkit-overflow-scrolling was still present at this point in time:

http://code.google.com/p/chromium/issues/detail?id=128325#c29
It turns out that iOS Safari also creates stacking contexts for all inherited elements, so let's leave this effect for -webkit-overflow-scrolling on Chrome for Android.  This means that we should never support this property on desktop Chrome.
So the decision to remove it probably occurred between Jan 8 and Feb 12.

No mention of this change was made in the official release notification here:

http://googlechromereleases.blogspot.co.uk/2013/04/chrome-for-android-stable-channel-update.html

For now I have customised the Modernizr test for overflow scrolling so that if it does not detect the feature it checks the user agent of the browser to see if it is the currently affected version and if so returns true. Obviously this is not an ideal scenario.

1 comment:

  1. It seems that lately Google has been pushing the boundary of Chrome and Chromium OS. Jack Kikta

    ReplyDelete