GPU ускорил переход CSS3 только рывки в Chrome на дисплее сетчатки - PullRequest
Новая
       10

GPU ускорил переход CSS3 только рывки в Chrome на дисплее сетчатки

0 голосов
/ 01 октября 2019

Я пытаюсь выполнить масштабный и переводный переход для большого элемента (3000 на 1500 пикселей), как показано в этом коде:

https://codepen.io/glenn-allen/pen/GRKbdGZ

Я используюсоответствующие свойства CSS, чтобы гарантировать, что элемент получает свой собственный слой, а переход ускоряется с помощью графического процессора: 

.scrollable-area {
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.scrollable-area.scaled {
    transform: translate3d(-750px, -300px, 0) scale(0.5)
}

Кажется, что все это прекрасно работает, за исключением случайного выбора, и только на дисплеях сетчатки в Google Chrome (а не Safari или Firefox) это тормозит. Задержка не всегда возникает при каждом переходе, но, что интересно, при попытке использовать Chrome Dev Tools для профилирования производительности он никогда не тянет.

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

Вопросы

  1. Есть ли у меня какие-либо стратегии? отсутствует, что может позволить мне улучшить производительность этого перехода для Chrome?
  2. Есть ли причина, по которой производительность улучшается при использовании отладчика производительности в Chrome Dev Tools? Приводит ли он к какому-либо оптимизированному режиму с высоким приоритетом?

Моя среда

iMac (Retina 5K, 27-дюймовый, конец 2015 г.),4 ГГц Intel Core i7, AMD Radeon R9 M395X 4 ГБ

Я также наблюдал это на других iMac с сетчаткой и различным аппаратным обеспечением.

...