Note: Submitting this on behalf of a user who contacted us via the support mailbox:
Fedora 39 (with Sway WM instead of GNOME)
Qutebrowser 3.0.0 (with Javascript disabled) which uses:
QtWebEngine 6.6, based on Chromium 112.0.5615.213
Please stop overriding the browser’s scroll bars with custom CSS. They are bad for accessibility[1] and (practically) impossible to fix in a user stylesheet[2].
- https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#accessibility_concerns
- https://superuser.com/questions/380629/is-there-a-way-to-disable-custom-webkit-scrollbars
Find attached: sb-norm, the normal scrollbar appearance in my
browser (I’m sure it behaves as you expect). Compare to sb-kagi
where you see:
The scroll up/down arrows have been replaced by white space.
One can still click this space and have the expected thing happen
but why would anyone expect a blank space to be behave in that
way? It took me until today to realize it because I assumed there
was a bug in the scrollbar that prevented it from going all the
way to the top or bottom as usually happens when there are no
arrows.
The track has been replaced by white space which again is
clickable and does the expected thing (but…who expects this). Now
though I have to carefully draw a line down from the left edge of
the thumb, mentally fill in the track to make sure I don’t miss
the clickable area and then remind myself that this blank space is
magic. To hit the default scrollbar hardly requires a glance
toward the window edge much less any careful calculation or mental
gymnastics.
These elements are important to people who don’t use a mouse wheel
or touch pad/screen; they “click to go here” on the scrollbar
track or repeatedly click on the arrows to scroll. There are
mental, physical and practical reasons for these preferences.
Replacing these elements with blank space is nonsensical and a
disservice to users. It’s such a totally thoughtless “design” that
I have a hard time imagining how it passed any kind review that
considered more than superficial aspects.
- Even the aesthetic improvement is suspect as you now have this
unsightly gap between the header and the edge of the window
(scroll down a little and the gap shows above the thumb too). Of
course it’s stopping at the edge of the invisible track but the
effect looks second-rate and in my opinion is worse than a frumpy
default scrollbar. It looks unfinished or the effect of a bug (and
‘background:transparent’ won’t fix it). You’re stuck with that
ugly gap or whatever hack you can find to work around it.
There is also the problem controlling how things look with a user
stylesheet. Usually this kind of mess can be corrected with user
CSS like:
button {
all: revert !important;
appearance: auto !important;
}
However the non-standard ‘::webkit-scrollbar-*’ pseudo-elements do
not support such treatment. Once they’ve been changed the only
recourse I’m aware of is re-implementing the default appearance in
user CSS from scratch.
There is no way to restore the default experience. Changing the
style changes the scrolling behavior subtly such that the
relationship between mouse motion and scroll thumb motion no
longer matches the default. It’s only very slightly different but
wrecks muscle memory and makes it feel like something is wrong
(mouse battery low? computer overloaded?). Probably a bug in the
browser but why would they care? They spent years warning you not
to use this stuff in the first place.
The standardized ‘scrollbar-*’ CSS properties do not suffer the
same problem. So limit your customization to the standard
properties there won’t be any trouble to override it.
Someday Webkit will support the standards but in the meantime you
can remove the misguided use of the ‘::webkit-scrollbar’ elements.
Finally, you should ask yourself why a page of search results is unique
enough to justify ignoring the advice of usability experts,
browser developers and specification authors.
Scrollbars are easy to get right. In fact, the less work you do,
the better your scrollbar. Usability is almost always enhanced
when you use the built-in scrollbars rather than design your own.
Non-standard: This feature is non-standard and is not on a
standards track. Do not use it on production sites facing the
Web: it will not work for every user. There may also be large
incompatibilities between implementations and the behavior may
change in the future.
NOTE: Exposing the scrollbar-related ::-webkit- prefixed
pseudo-elements to the Web is considered a mistake by both the
CSS Working Group and Webkit.
Kagi scrollbars shouldn't be overridden using custom CSS
