Назовите меня сумасшедшим, но я работаю над игрой, использующей vanilla DOM и TypeScript. Это не требует активных действий, но некоторые анимации происходят из JavaScript (слишком сложно сделать в CSS).
Я уже применяю общий трюк translateZ(0) (называемый хак с нулевым преобразованием или менее точно серебряная пуля ), чтобы вставить анимированные элементы в их собственный слой рендеринга, и я ничего не анимирую, кроме свойств только для композиторов (transform и opacity). Это прекрасно работает: во время игры все выглядит гладко, даже на старых мобильных устройствах.
Проблема во время запуска игры. В этот момент около 70 индивидуально преобразованных и анимированных элементов попадают на страницу один за другим в течение нескольких секунд, анимируя их opacity от 0 до нуля. Это вызывает видимое заикание во время анимации.
Я предположил, что Chrome здесь слишком умный и будет растеризовывать каждый элемент только в тот момент, когда он впервые станет видимым. Быстрая проверка с помощью инструментов dev подтверждает это, поскольку во время анимации происходит большая растеризация:
Я бы предпочел растеризовать все эти элементы один раз, до начала анимации, и только потом запускать анимацию. Но как я могу форсировать растеризацию элементов, которые еще не видны, не показывая пользователю их вспышку?
Я был бы доволен подходом только для Chrome, но кросс-браузер был бы еще лучше.