Scrollbar controls appear twice if body is set to display: grid
AlexAegis opened this issue · comments
Problem
Both vertically and horizontally I can see 2 controls on both ends.
Visually the duplicated controls point to the same direction, but move the scrollbar the other direction.
I illustrate:
[move left][move right] ---- scrollbar ---- [move left][move right]
And same thing vertically.
Reproduction
This happens if I set the body to display: grid
body {
display: grid;
}
Workaround:
Don't do it.
This is suddenly happening to me with display:flex as well. It did not appear this way for a little bit but for some reason is, and I'm not sure why. Same behaviour as OP - the duplicated controls work in reverse. Cannot easily find why this is in Inspect Element or the CSS itself.
EDIT: Was able to fix it by moving display:flex to the main container instead of it's parent. Not really sure why this changes the behaviour but it works so I won't complain!
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement
{
display: none;
}
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement, ::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
That does the trick. Thanks @vncscoelho