MacOS Chrome barre de défilement horizontale ne disparaît pas

Question

Je développe une application avec quelques composants qui défilent horizontalement. Je suis tombé sur un comportement indésirable où la barre de défilement horizontale ne disparaît pas, laissant une longue barre de défilement blanche laide.

Mon paramètre "Afficher les barres de défilement" sur MacOS est défini sur "Basé automatiquement sur la souris ou le trackpad". Mon chrome est la version 72.0.3626.121 (version officielle) (64 bits).

Le problème peut être reproduit dans l'extrait ci-dessous.

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

Le problème se produit lorsque vous survolez le bas de la zone de défilement horizontale (donc là où la barre de défilement apparaîtra, le fond violet du conteneur avec des carrés roses). La barre de défilement apparaîtra et ne quittera plus jamais. La même chose ne se produit pas avec la zone de défilement verticale, où la barre de défilement apparaît également mais disparaît. Si vous faites défiler la barre de défilement avant de survoler le bas, le problème ne se posera pas ensuite si vous survolez l'endroit où la barre de défilement apparaîtra.

Dans l'image ci-dessous, j'ai survolé le bas de la zone de défilement horizontale et cela montre que la barre de défilement est là (et elle ne part pas après!).

Ce problème se produit également lorsque je survole la barre de défilement horizontale à partir d'un bloc de code stackoverflow, ce qui rend le texte difficilement lisible.

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 

Cela ressemblera à ceci et la barre de défilement ne disparaîtra plus comme dans mon cas:

Je suppose que c'est un bogue dans Chrome avec MacOS mais j'espérais que je pourrais peut-être faire quelques astuces CSS pour résoudre ce problème.

Answer 1

Nous rencontrons ce problème sur nos Mac avec la même version du système d'exploitation, les mêmes chrome. Les conclusions finales que nous avons obtenues sont les suivantes:

• ceux qui utilisent le Apple souris et trackpad d'origine sont capables de voir tout normal.
• Lorsque nous nous connectons au même ordinateur, une souris USB standard, après avoir rechargé le Web, nous avons soudainement obtenu les barres de défilement ennuyeuses.

Il a été testé et la même chose s'est produite dans 3 MacBook Pro différents.

Je télécharge une vidéo ici ce qui se passe lorsque je me déconnecte et que je me branche: https://youtu.be/AGTF2Ltuxnk

[~ # ~] modifier [~ # ~]

Notre solution personnalisée était d'empêcher les barres de défilement par défaut et de configurer nos propres barres de défilement qui ne s'afficheront qu'en cas de besoin.

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