MacOS Chrome horizontal scrollbar not disappearing - css

Question

I am developing an application with a few components that are scrollable horizontally. I've come across some unwanted behaviour where the horizontal scrollbar does not disappear leaving an ugly long white scrollbar.
My 'show scroll bars' setting on MacOS is set to 'Automatically based on mouse or trackpad'. My chrome is Version 72.0.3626.121 (Official Build) (64-bit).
The issue can be reproduced in the snippet below.
#horizontal {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
border: 2px solid purple;
display: flex;
}
#vertical {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
flex-direction: column;
border: 2px solid purple;
display: flex;
}
.horizontal-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: pink;
display: flex;
}
.vertical-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: red;
display: flex;
}
<div id="horizontal">
<div class="horizontal-item">1</div>
<div class="horizontal-item">2</div>
<div class="horizontal-item">3</div>
<div class="horizontal-item">4</div>
<div class="horizontal-item">5</div>
<div class="horizontal-item">6</div>
<div class="horizontal-item">7</div>
<div class="horizontal-item">8</div>
<div class="horizontal-item">9</div>
<div class="horizontal-item">10</div>
<div class="horizontal-item">11</div>
<div class="horizontal-item">12</div>
<div class="horizontal-item">13</div>
<div class="horizontal-item">14</div>
<div class="horizontal-item">15</div>
<div class="horizontal-item">16</div>
<div class="horizontal-item">17</div>
<div class="horizontal-item">18</div>
<div class="horizontal-item">19</div>
<div class="horizontal-item">20</div>
</div>
<div id="vertical">
<div class="vertical-item">1</div>
<div class="vertical-item">2</div>
<div class="vertical-item">3</div>
<div class="vertical-item">4</div>
<div class="vertical-item">5</div>
<div class="vertical-item">6</div>
<div class="vertical-item">7</div>
<div class="vertical-item">8</div>
<div class="vertical-item">9</div>
<div class="vertical-item">10</div>
<div class="vertical-item">11</div>
<div class="vertical-item">12</div>
<div class="vertical-item">13</div>
<div class="vertical-item">14</div>
<div class="vertical-item">15</div>
<div class="vertical-item">16</div>
<div class="vertical-item">17</div>
<div class="vertical-item">18</div>
<div class="vertical-item">19</div>
<div class="vertical-item">20</div>
</div>
The problem occurs when you hover over the bottom of the horizontal scrollable area (so where the scrollbar will appear, the purple bottom of the container with pink squares). The scrollbar will appear and never leave again. The same does not happen with the vertical scrollable area, where the scrollbar also appears but does disappear. If you scroll the scrollbar before hovering over the bottom then afterwards said problem won't occur if you hover over where the scrollbar would appear.
In the image below I hovered over the bottom of the horizontal scrollable area and it shows the scrollbar is there (and it does not leave afterwards!).
This problem infact also occurs when I hover over the horizontal scrollbar from a stackoverflow code block, making text hardly readable.
Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text
It will look like this and the scrollbar wont disappear anymore much like in my own case:
I'm assuming this is a bug in Chrome with MacOS but I was hoping there may be some CSS tricks I can do to solve this problem.

Answer 1

This is Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36
Many people are adding white space of scrollbar size (25px) to prevent scrollbar from obscuring content.
It is workaround and can be considered only as a temporary solution though.

Answer 2

From the ticket, they give a workaround until the issue is fixed:
Go into your System Preferences > General
Select Always:

Answer 3

We have been having this issue in our Macs with same OS version, same chrome versions. The final conclusions we got are the following:
the ones using the Apple Original mouse and trackpad are able to see all normal.
When we connect to the same computer one standard USB mouse, after reload the web we suddenly got the annoying scrollbars.
It was tested and same happened in 3 different MacBook Pro.
I upload a video here what happens when I plug out and in: https://youtu.be/AGTF2Ltuxnk
EDIT
Our custom solution was prevent default scroll bars and set up our own scroll bars that will only be displayed when neededneeded.
::-webkit-scrollbar-track {
display: none;
border-color: transparent;
background-color:transparent;
}
::-webkit-scrollbar * {
background:transparent;
}
::-webkit-scrollbar {
width:rem(7);
min-width:rem(7);
height:rem(7);
min-height:rem(7);
}
::-webkit-scrollbar-corner {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
border-radius:rem(10);
background-color:#666;
-webkit-box-shadow: inset 0 0 0 ;
}