MacOS Chrome水平スクロールバーが消えない

Question

水平方向にスクロール可能ないくつかのコンポーネントを使用してアプリケーションを開発しています。水平スクロールバーが消えず、醜い長い白いスクロールバーが残るという、望ましくない動作に遭遇しました。

MacOSでの「スクロールバーの表示」設定は、「マウスまたはトラックパッドに基づいて自動的に」に設定されています。私のchromeはバージョン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>

この問題は、水平スクロール可能領域の下部にカーソルを合わせると発生します（スクロールバーが表示される場所は、ピンク色の四角形のコンテナーの紫色の下部です）。スクロールバーが表示され、二度と離れることはありません。同じことは、スクロールバーも表示されるが非表示になる垂直スクロール可能領域でも発生しません。下部にホバーする前にスクロールバーをスクロールすると、その後スクロールバーが表示される場所にホバーしても問題は発生しません。

下の画像では、水平スクロール可能領域の下部にカーソルを合わせたところ、スクロールバーが表示されています（その後表示されません）。

この問題は、stackoverflowコードブロックから水平スクロールバーにカーソルを合わせたときにも発生し、テキストが読みにくくなります。

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 

それはこのようになり、スクロールバーは私自身の場合のように消えることはありません：

これはChromeのバグであると想定していますが、この問題を解決するためにできるCSSのトリックがいくつかあることを望んでいました。

Answer 1

同じOSバージョン、同じchromeバージョンのMacでこの問題が発生しています。最終的な結論は次のとおりです。

• Apple=オリジナルのマウスとトラックパッドを使用しているものは、すべての正常を見ることができます。
• 同じコンピューターに1つの標準USBマウスを接続すると、Webをリロードした後、不快なスクロールバーが突然表示されました。

それはテストされ、同じことが3つの異なるMacBook Proでも起こりました。

ここにビデオをアップロードして、プラグインとプラグインするとどうなるか https://youtu.be/AGTF2Ltuxnk

[〜＃〜]編集[〜＃〜]

私たちのカスタムソリューションは、デフォルトのスクロールバーを防ぎ、必要なときにのみ表示される独自のスクロールバーをセットアップすることでした。

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