[Problem/Bug]: native-scrollbar ignoring CSS styling, causing improper appearance and app look.

[cryptofyre]

What happened?

Recently as of the newest stable update to the WebView 2 runtime 119.0.2151.44 the native-scrollbar document body attribute seems to ignore all CSS styling on overlay scrollbars causing them to appear opaque and always show even without mouse hover or if the content is empty.

We've been able to fix this for the time being by removing the page attribute, but we like the style and functionality of the W11/native ones so it's a shame these no longer work as they should.

Before (Scrollbars properly hidden til hover, and effectively styled) [118.0.2088.76]

After (Scrollbars shown at all times and misstyled) [119.0.2151.44]

Temporary Fix (Removed native-scrollbar attribute, not preferred.) [119.0.2151.44]

Importance

Moderate. My app's user experience is affected, but still usable.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

119.0.2151.44

SDK Version

webview2-com 0.19 (Rust)

Framework

Other

Operating System

Windows 11

OS Version

23580.1000 (Also bugged on Stable, Beta)

Repro steps

Set up a new WebView2 application and have the attribute set for native-scrollbar set to 1

This can be done using the following document.body.setAttribute('native-scrollbar', "1");

Then create a few overlay scrollbars under certain mouseover and visibility scenarios under the old 118.0.2088.76 runtime.

Once you switch over to 119.0.2151.44, those scrollbars will now always show and disobey styling instead of being styled as they should be to how you had them setup prior on 118.0.2088.76

Here's some of our example css styles for the scrollbars:

html {
  overscroll-behavior-x: none;
}

body {
  overscroll-behavior-x: none;
}

body:not([native-scrollbar]) ::-webkit-scrollbar {
  width: 16px;
  height: 24px;
}
body:not([native-scrollbar]) ::-webkit-scrollbar-button {
  display: none;
}
body:not([native-scrollbar]) ::-webkit-scrollbar-track-piece {
  background: transparent;
  margin-top: var(--scrollbarTopOffset);
}
body:not([native-scrollbar]) ::-webkit-scrollbar-thumb {
  background: transparent;
  border: 6px solid transparent;
  box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5);
  border-radius: 16px;
  min-height: 64px;
  transition: border 1s;
}
body:not([native-scrollbar]) ::-webkit-scrollbar-thumb:hover {
  border: 5px solid transparent;
  box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.8);
}

.use-overlay-scrollbar ::-webkit-scrollbar {
  width: 16px;
  height: 24px;
}
.use-overlay-scrollbar ::-webkit-scrollbar-button {
  display: none;
}
.use-overlay-scrollbar ::-webkit-scrollbar-track-piece {
  background: transparent;
  margin-top: var(--scrollbarTopOffset);
}
.use-overlay-scrollbar ::-webkit-scrollbar-thumb {
  background: transparent;
  border: 6px solid transparent;
  box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5);
  border-radius: 16px;
  min-height: 64px;
  transition: border 1s;
}
.use-overlay-scrollbar ::-webkit-scrollbar-thumb:hover {
  border: 5px solid transparent;
  box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.8);
}

Regression

Regression in newer Runtime

Last working version (if regression)

Runtime 118.0.2088.76

[aluhrs13]

@cryptofyre - Any chance you can share the repro in vanilla CSS or a pointer to URL with the issue? I don't think anyone on our team has SCSS familiarity, so that might be a speed bump to looking at this.

Also if this repros in the browser would be super useful information

@nishitha-burman This is a custom implementation of overlay scrollbars that someone made and is broken in 119, can you see if Olga's team has made any changes that might be the cause?

[cryptofyre]

I've updated the issue to use the computed SCSS stylesheets back to standard CSS which should make this easier for you, as for the browser, Edge 119.0.2151.44 seems to have the same issue when the native-scrollbar is set as well.

[nishitha-burman]

@cryptofyre can you please provide more context on native-titlebar? I couldn't find any documentation on it. Can you also share the repro steps for this on Edge? Thanks!

[cryptofyre]

Meant to say native-scrollbar not titlebar, my bad 😅

As for reproducing it in edge, you can use the same javascript line to have edge try and utilize its own scrollbars.
document.body.setAttribute('native-scrollbar', "1");

You'll need to make a quick little HTML page with a few scrollable elements with the CSS I've updated in the issue which then you can see the before and after when you attempt using the native-scrollbar attribute where it begins to ignore certain behaviors and work improperly and unlike it did in 118.

Let me know if you need anything else!

[nishitha-burman]

I wasn't able to find documentation for native-scrollbar either. Can you please share any documentation? Thanks!

[cryptofyre]

Seems to be largely related to the #edge-overlay-scrollbars-win-style flag in Edge, I'll need to talk to our UI lead (@booploops) to figure out where he learned the attribute for it though, but judging from what I've read it seems to just tell Edge/WV to utilize its own overlay scrollbars which that flag seemingly forces them generally everywhere(?).

[cryptofyre]

Good news, this issue appears to be fixed as of 120.0.2210.61!

[victorhuangwq]

Closing this issue then! Thanks for the update

[KiddoV]

I am still having the same issue as @cryptofyre on version 121.0.2277.106.
(Noted I am not even using native-scrollbar)
Using just some basic CSS style:

/* Scroll Bars */  
body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    z-index: 999999;
}
body ::-webkit-scrollbar-corner {
    background-color: inherit;
}
body ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
}
body ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
}
body ::-webkit-scrollbar-button {
    display: none;
}
body ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: default !important;
}

Still seeing this:

It seem to be OK on Chrome Browser:

[KiddoV]

Fixed the problem.
My UI library is using these CSS style that make it happen:

body .ui {
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1);
  scrollbar-width: thin;
}

Fix by override:

body .ui {
    scrollbar-color: auto;
    scrollbar-width: auto;
}

The problem was not present in older version of Edge though.