Scrollbar not draggable in Chrome overlay-scrollbar

[chaopeng]

Hi Team,

I am from chrome team and currently working on overlay-scrollbar and it will land soon. I recently got a bug report about CodeMirror. https://bugs.chromium.org/p/chromium/issues/detail?id=707337

For this issue, I have 2 solutions to fix:

1. use overflow: auto and not hide the default scrollbars. Can you also tell me the reason for CodeMirror create another scrollbars and hide the default scrollbars. I will fix it if it is a chrome related issue.
2. fix the calculation of zeroWitdh https://github.com/codemirror/CodeMirror/blob/master/src/display/scrollbars.js#L114

Thank you.

[chaopeng]

Also we will use this 2 flags to enable overlay scrollbar. --enable-overlay-scrollbar --enable-prefer-compositing-to-lcd-text

[marijnh]

Can you also tell me the reason for CodeMirror create another scrollbars and hide the default scrollbars.

See http://marijnhaverbeke.nl/blog/a-pathological-scrolling-model.html

fix the calculation of zeroWitdh

What is wrong with zeroWidth?

[chaopeng]

What is wrong with zeroWidth?

It set pointer-events none when we enabled overlay scrollbar. That makes scrollbar not draggable.

[marijnh]

It briefly re-enables pointer events when you scroll, which works for OS X-style scrollbars -- but maybe your overlay scrollbar works differently? Is it constantly visible? How does it prevent interfering with mouse events that want to interact with the content on the right of the viewport?

[chaopeng]

Yes, we have some different with Mac-Overlay-Scrollbar. Mouse near or hover will not fade out the scrollbar. It only fade out when mouse move far from scrollbar.

[marijnh]

Do they handle pointer events on the whole bar, or only the handle? What if the user wants to interact with the content under it?

[chaopeng]

Do they handle pointer events on the whole bar, or only the handle?
The whole bar.

What if the user wants to interact with the content under it?
Need to move mouse far from scrollbar.

[marijnh]

Need to move mouse far from scrollbar.

I don't understand. If the content is below the scrollbar, you can't interact with it when you're far away from the scrollbar.

[chaopeng]

move mouse far away then scrollbar fade out then you can interact with it.

[marijnh]

Is there any way for CodeMirror to figure out whether a given scrollbar is faded in or out?

[chaopeng]

No. we don't.

[marijnh]

That's going to make it difficult to do the right thing when the user interacts with the pixels covered by the scrollbar element.

[chaopeng]

1. Maybe we can enable custom scrollbar on ChromeOS since we will only make overlay scrollbar by default on CrOS soon.
2. I think the fake scrollbar not really improve the scroll proformance. At least on Chrome, the fake scrollbar will make the scroll happends on main thread not cc thread.

[marijnh]

I think the fake scrollbar not really improve the scroll proformance.

It isn't about scroll performance, as you can read in that blog post I linked, it's about preventing the user from scrolling content that hasn't been drawn into view. I.e. regular scroll events aren't synchronous, so we need the fake scrollbar to be able to respond to scrolling before the main content is redrawn.

[chaopeng]

There is a spec for scrollbar gutter. But no browser support it at this time. https://drafts.csswg.org/css-overflow/#scollbar-gutter-property

[marijnh]

Does attached patch help for you? I found I could enable these scrollbars with a flag, so I could test them on Linux. The hack that was in place for OS X scrollbars almost worked for Chrome's, and with attached tweak it worked for me (I didn't test Chrome OS, since I don't have a device that runs it).

[chaopeng]

Yes, The Linux with flag "--enable-overlay-scrollbar --enable-prefer-compositing-to-lcd-text" will have same behavious with ChromeOS. It works better now. Still have some issue, I'll work on it. Thank you.