Как отобразить полосу прокрутки в угловом материале mat-select на сафари?

Question

Это проблема конкретного браузера.В Chrome, Firefox и Edge полоса прокрутки отображается, когда mat-options больше, чем mat-select .Пользователь знает, что есть больше вариантов из-за полосы прокрутки.Однако в сафари полоса прокрутки появляется только тогда, когда пользователь прокручивает страницу вниз.Это означает, что пользователь может не знать, что в mat-select больше опций mat.Вот пример кода:

<mat-select>
  <mat-option>
    Option 1 
  </mat-option>
  <mat-option>
    Option 2 
  </mat-option>
  <mat-option>
    Option 3 
  </mat-option>
  <mat-option>
    Option 4 
  </mat-option>
  <mat-option>
    Option 5 
  </mat-option>
  <mat-option>
    Option 6 
  </mat-option>
</mat-select>

Как я могу заставить полосу прокрутки всегда отображаться в сафари, как и в других браузерах?Пользователь может не знать, что вариант 6 существует в другом примере.

Answer 1

Попробуй принудительно показать его при наведении

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}