Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webview scrollbars are seemingly unstyleable in Insiders #213045

Open
eamodio opened this issue May 20, 2024 · 3 comments
Open

Webview scrollbars are seemingly unstyleable in Insiders #213045

eamodio opened this issue May 20, 2024 · 3 comments
Assignees
Labels
webview Webview issues

Comments

@eamodio
Copy link
Contributor

eamodio commented May 20, 2024

Here is what my webview scrollbars look like in 1.89.1:

image

Here is what they look like in 1.90-insiders:

image

@mjbvz mjbvz added the webview Webview issues label May 20, 2024
@mjbvz
Copy link
Contributor

mjbvz commented May 20, 2024

Looks styled still based on the colors, just different rendering

@eamodio
Copy link
Contributor Author

eamodio commented May 20, 2024

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
Copy link
Contributor

Version: 1.90.0-insider (Universal)
Commit: 81c89c4
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.

scrollbarbackground

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
webview Webview issues
Projects
None yet
Development

No branches or pull requests

3 participants