MacOS Chrome горизонтальная полоса прокрутки не исчезает

Я разрабатываю приложение с несколькими компонентами, которые можно прокручивать по горизонтали. Я столкнулся с некоторым нежелательным поведением, когда горизонтальная полоса прокрутки не исчезает, оставляя уродливую длинную белую полосу прокрутки.

Моя настройка "показывать полосы прокрутки" в MacOS установлена на "Автоматически на основе мыши или трекпада". Мой хром - Версия 72.0.3626.121 (Официальная сборка) (64-битная версия).

Проблема может быть воспроизведена во фрагменте ниже.

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

Ответ 1

Это проблема Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36

Многие люди добавляют пустое пространство размера полосы прокрутки (25 пикселей), чтобы полоса прокрутки не закрывала содержимое. Это обходной путь и может рассматриваться только как временное решение, хотя.

Ответ 2

Начиная с тикета, они дают обходной путь, пока проблема не будет устранена:

Войдите в свой System Preferences> General

Выберите Always:

Ответ 3

У нас была эта проблема на наших компьютерах Mac с той же версией ОС, с теми же версиями Chrome. Окончательные выводы, которые мы получили, следующие:

те, кто использует мышь Apple Original и трекпад, могут видеть все нормально.
Когда мы подключаем к одному и тому же компьютеру одну стандартную USB-мышь, после перезагрузки сети мы внезапно получаем надоедливые полосы прокрутки.

Это было проверено, и то же самое произошло в 3 разных MacBook Pro.

Я загружаю видео здесь, что происходит, когда я подключаюсь и в: https://youtu.be/AGTF2Ltuxnk

EDIT

Нашим индивидуальным решением было предотвратить использование полос прокрутки по умолчанию и настроить собственные полосы прокрутки, которые будут отображаться только при необходимости.

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