Can someone look at this problem?

Able to reproduce this issue on reported version 65.0.3325.181, latest stable 67.0.3396.99 and latest canary 69.0.3489.0 using Mac 10.13.3, Windows 10 and Debian.

This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged.

Thanks!

I think it is intended. Because custom scrollbar may use too much area on small screen. bokan@ may know about that.

Currently, we always disable custom scrollbar for root (visual view port) scrollbar on mobile. You can test http://ht.chaopeng.me/link-under-custom-scrollbar.html, it has custom scrollbar on desktop but overlay scrollbar on mobile. Mobile emulator suppose to be same as mobile.

This is same as safari on mobile. 

This was an intentional decision long ago. I suspect it was to keep existing desktop pages usable in the mobile browser. That said, the web has probably changed enough since then that we could reevaluate this.

Ted, could you or someone from Android UX triage this request? It is a mild inconsistency and irrationality in the platform that custom scrollbars work on desktop pages and in subscrollers on Android but not on the main page in Android.

+klobag +boliu - Do you recall why custom scrollbars were disabled on Android?

https://bugs.chromium.org/p/chromium/issues/detail?id=611196#c11
https://bugs.chromium.org/p/chromium/issues/detail?id=438909#c4

Those are the bugs I could find, but I couldn't find the historical reasoning for this.

Are there performance implications of enabling custom scrollbars on mobile?  I do wonder if there are desktop pages that have very desktop optimized scrollbars that would look particularly terrible on mobile as bokan@ mentioned in #5, but the number of desktop sites is trending down (at least I suspect).

https://chromiumcodereview.appspot.com/11416027

If we want to make this consistent, then my vote is to disable custom scrollbars for all frames on android.

Do custom scrollbars work on iOS?  If they don't work there and there isn't a huge compelling reason to enable it on mobile, doing as boliu@ mentions in #9 seems reasonable to me.

This issue https://chromiumcodereview.appspot.com/11416027 was created 5 years ago. I should you try to disable it again.

For now, I'm in favor of making the custom scroll handling consistent across all layers.

Would that just mean renaming Set/GetAllowCustomScrollbarInMainFrame to SetAllowCustomScrollbars

Then changing ScrollbarStyleSource to remove the check for IsMainFrame()?

Assigning to trchen@ to add their thoughts.

The decision was made due to pinch zoom interaction. Traditionally there was only one viewport (a.k.a. layout/outer viewport). With pinch zoom we can magnify and only show a part of it, which is called the inner viewport.

From UX perspective, the scrollbar on the outer viewport is confusing and not very useful. 1. Its thumb position/length is based on the ratio between the outer viewport size and the document, not the actual visible size (inner viewport size). 2. More often than not it is outside of the screen due to zooming. Therefore it is not just custom scrollbar, in fact we never show any scrollbar at all for the outer viewport.

Currently there is no way to override the appearance of the inner viewport scrollbar, as it is not even a part of the DOM document. Reverting https://chromiumcodereview.appspot.com/11416027 will not hide the inner viewport scrollbars. Instead, you will start seeing two sets of scrollbars on every other websites!

That said, it is technically possible to make the inner viewport scrollbars a pseudo element. I personally don't see a strong demand for it though. I'm probably not the best person to make a decision on this, as this is really not an implementation issue, but rather a request to extend the web API.

Assigning back to boken@ since he owns scrolling and has experience adding web standards.

The outer viewport scrollbars have been made more zoom-friendly since the initial launch of inner/outer viewports. The outer viewport scrollbars are attached to the inner layer so that zooming wont make them larger and they don't detach from the screen edges. It'd be fairly easy to switch into this mode on Android when using custom scrollbars. You can try it out on a desktop browser with a touchscreen or pinch-zooming touchpad.

That said, there are some glaring bugs in this mode, namely issue 456861. That isn't an easy fix unfortunately and needs some refactoring which we haven't been able to prioritize.