Can scroll bar appearance be fixed? Or is it a chromium bug?

nirin

So at the moment, some websites have different scrollbars to others. Fine, maybe they have their own .css in place to style their bars....

Except that in firefox (floorp) all scrollbars are the same throughout the browser, making for a MUCH better visual/aesthetic experience as everything is consistent.

I tried using .css to fix it, going from some oldish threads on the matter, but it seems none of them work on website scrollbars and only work on the scrollbars you find in the vivaldi menu (which is fairly useless).

The only solution I've found so far, is to use an extension like "Rescroller" to customise the scrollbar... which works great, sort of. Except when you load a page for the first time, the old scrollbar appears first, and then a split second later the scrollbar gets replaced. (I don't blame rescroller for this, I suspect they are working within the limits of the browser).

So is there a way to fix this in vivaldi? I don't know if it's necessarily a vivaldi specific problem, as Edge seems to work the same way, so I guess it's a chromium issue, but hopefully someone out there has managed it.

barbudo2005

@nirin

Install the extension Stylus and play with this code:

https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

/* DRAWS THE SCROLLBARS */


body::-webkit-scrollbar

{background-color: #171b1d !important;
border: 0px !important;
border-radius: var(--radiusHalf) !important;	
padding: 0px !important;
width: 10px !important;
height: 10px !important;}


body::-webkit-scrollbar-track

{background-color: var(--colorBg) !important;
border-radius: var(--radiusHalf) !important;}


body::-webkit-scrollbar-thumb

{background-color: #565656 !important;
 border: var(--border) solid var(--colorBg) !important;
/* border-radius: var(--radius);*/
border-radius: var(--radiusHalf) !important;}


body::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:active

{background-color: #565656 !important;
border-radius: var(--radiusHalf) !important;}


body::-webkit-scrollbar-button

{display: none !important}

Use this setting:

barbudo2005

@nirin

Another modification is to homogenize the same font on all pages, which makes reading easier since your eyes get used to a single font:

*:not([class*="ico"], [class*="fa"], [class*="control"] *, [class*="button"], [role*="button"],[type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"],
[class*="bb"], [class="ll"], i, [class="i"], [class*="symbol"],  img, svg)


{font-family: Lato  !important;
font-weight: 400 !important;	
text-align: justify;
line-height: 1.5;
letter-spacing: 0.01rem !important;}

You can change "text-align" and "line-height" in some specific pages because they are not "!important"

To improve readability use:

*
{text-rendering: geometricPrecision !important;
-webkit-font-smoothing: subpixel-antialiased !important;
font-optical-sizing: auto !important;}

Download Lato font in this page:

https://fonts.google.com/specimen/Lato