Как предотвратить размытую полосу прокрутки на Windows Chrome после масштабирования преобразования? - PullRequest
Новая
       56

Как предотвратить размытую полосу прокрутки на Windows Chrome после масштабирования преобразования?

5 голосов
/ 28 мая 2020

У меня возникла странная проблема при попытке масштабировать элемент HTML. Как показано в этом коде , я хочу, чтобы элемент казался уменьшенным (transform: scale(0.1)), затем анимировал себя и масштабировал до своего полного размера (transform: scale(1)). Элемент представляет собой большой список, ограниченный по высоте с использованием overflow: auto;, что означает отображение полосы прокрутки.

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

Blurry scrollbar

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

Заранее спасибо за любой совет :)

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

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

Изменить масштаб по перспективе + translateZ. это уменьшает размер элемента (так как теперь он «далеко») и, похоже, не содержит ошибки: 

setInterval(() => {
  const className = document.getElementsByTagName('main')[0].className
document.getElementsByTagName('main')[0].className = className ? '' : "shazam"
}, 2000)
main {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  margin: auto;
  overflow: auto;
  transform: perspective(100px) translateZ(-1000px);
  transition: transform 1500ms;
  transform-origin: top left;
}

.shazam {
  transform: perspective(100px) translateZ(0px);
}
  <h1>List of interesting things I've done during lockdown</h1>
<main>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>… Who cares about lists anyway?</li>
  </ul>
</main>
0 голосов
/ 28 мая 2020

Превращая мой комментарий в правильный ответ:

Замедляя анимацию, вы можете видеть, что графический движок W10 Chrome и Edge (используют ту же базу кода с Edge March 2020) просто пропускают определенные полоса прокрутки «рисует» во время анимации и показывает только большой палец при масштабировании ...

W10 Firefox, однако, масштабирование выполняется должным образом. впереди много работы, чтобы обойти проблему, поскольку вам нужно погрузиться в разработку браузера и проверить для каждого браузера (HTML / CSS), как избежать такого поведения.

Стоит ли это вашего времени и усилий?

...