Scrollbar controls appear twice if body is set to display: grid

[AlexAegis]

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.

[vmorrisonwood]

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!

[vncscoelho]

::-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;
}

[edwardmyung]

::-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