Webview scrollbars are seemingly unstyleable in Insiders

[eamodio]

Here is what my webview scrollbars look like in 1.89.1:

Here is what they look like in 1.90-insiders:

[mjbvz]

Looks styled still based on the colors, just different rendering

[eamodio]

They really don't look that similar (other than the colors are close) -- in the first the scrollbar has no corners (arrows) is much thinner, and what you can't tell in the screenshot is that it behaves just like other VS Code scrollbars in that it hides and fades based on hover/focus.

While in Insiders none of those style are taking affect -- it seems ::-webkit-scrollbar* properties don't seem to apply anymore. So we seem to be stuck with almost standard platform scrollbars.

[tamuratak]

Version: 1.90.0-insider (Universal) Commit: 81c89c4d00663e1718871bab2f9bf2064a060b63 Date: 2024-05-22T09:32:21.946Z Electron: 29.3.1 ElectronBuildId: 9464424 Chromium: 122.0.6261.156 Node.js: 20.9.0 V8: 12.2.281.27-electron.0 OS: Darwin arm64 22.6.0

I see a similar issue.

1. Executing Webview View API Sample: https://github.com/microsoft/vscode-extension-samples/tree/main/webview-view-sample
2. The background color of the scrollbar is white.

A workaround is adding the following to main.css:

html {
    scrollbar-color: var(--vscode-scrollbarSlider-background) var(--vscode-sideBar-background);
}

Adding ::-webkit-scrollbar* doesn't work.

[eamodio]

This is now broken in Stable -- @isidorn can we get a fix or resolution on this, since this is a regression from existing webview behavior.

[bpasero]

If this is a confirmed regression, it would help to know which change caused it. We maintain a node.js based CLI tool vscode-bisect that automatically downloads and runs previous VS Code insiders and asks for each build if the issue reproduces. It takes up to 8 steps to find exactly the build that caused the regression.

Steps:

• install node.js (if not yet done)
• npx --yes @vscode/vscode-bisect@latest
• follow the instructions until you found the offending build (its fine to leave the commit empty)
• report back the commit range in this issue

Thanks!

[jiang-zhong-xi]

same issue

[boltex]

same issue. Made it thinner with this:

body {
  scrollbar-width: thin;
  scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
 }

But still not like before !

[eamodio]

So this is a behavior change in Chrome 121 -- if scrollbar-color or scrollbar-width are used then the ::-webkit-scrollbar* props are ignored.

And the webview's index.html sets scrollbar-color.

I've opened #220121 to address this, but in the meantime, extensions can work around this by adding the following to their webview css:

@supports selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: unset;
    }
}

[Chuxel]

JFYI - I see the same problem in stable now.

Version: 1.92.2 (user setup) Commit: fee1edb8d6d72a0ddff41e5f71a671c23ed924b9 Date: 2024-08-14T17:29:30.058Z Electron: 30.1.2 ElectronBuildId: 9870757 Chromium: 124.0.6367.243 Node.js: 20.14.0 V8: 12.4.254.20-electron.0 OS: Windows_NT x64 10.0.22631

I lucked into setting style="scrollbar-color: unset" on the html element to resolve it.