Трюк translateZ

CSS-фильтры — это здорово

CSS-фильтры — это очень здорово. Они могут взять что-то, что выглядит вот так…

…и сделать его похожим на это:

Очень нравится. Подобные эффекты — самое интересное в написании CSS.

И blur() — это лишь один из многих интересных фильтров. Остальные перечислены здесь.

Фильтры CSS становятся особенно полезными, когда вам нужно анимировать элементы на странице и за ее пределами, или на переднем плане и за его пределами. Например, вы можете захотеть размыть элемент все больше и больше по мере того, как он анимируется за пределами страницы. Или когда пользователь открывает модальное окно, вы можете постепенно размывать страницу за ним, чтобы переключить внимание пользователя на содержимое модального окна.

Проблемы с Safari

К сожалению, как только вы начнете анимировать свойство CSS filter, вы заметите, что в Safari ваша анимация выглядит ужасно отрывисто.

Я столкнулся с этой проблемой на работе пару лет назад, анимируя фильтры CSS. А недавно я слышал, как Скотт Толински сетовал в Twitter и в подкасте Syntax, что он был в восторге от использования CSS-фильтров, но был вынужден отказаться от них из-за этой проблемы с рендерингом в Safari.

Но решение есть! Вот почему я пишу этот пост, хотя бы для того, чтобы помочь Скотти. 😎

Исправление

Чтобы исправить проблему в Safari, сделайте следующее…

.thing {
  filter: blur(4px);
}

…и измените его на этот:

.thing {
  filter: blur(4px);
  transform: translateZ(0);
}

Вот и все. Теперь ваши анимации будут плавно работать в Safari.

Как помогает translateZ?

Основная причина, по которой translateZ(ANY_VALUE) обеспечивает плавную работу анимации, заключается в том, что он указывает Safari на необходимость рендеринга анимации с помощью GPU, а не CPU.

Без translateZ (или аналогичной подсказки) Safari будет пытаться анимировать ваш фильтр с помощью CPU, который не в состоянии отрисовывать сложную графику. Для графически сложных задач, таких как анимация эффекта фильтра, графический процессор всегда будет работать намного лучше.

Помоги нам, Safari

Chrome и другие браузеры, отличные от Safari, автоматически аппаратно ускоряют подобные анимации, задействуя GPU, но Safari по-прежнему требует добавления специальных свойств, таких как translateZ, чтобы получить тот же результат.

Надеюсь, команда Safari скоро исправит эту проблему, и Скотт сможет анимировать все крутые CSS-функции, которые ему нравятся, не прибегая к обходным путям, подобным этому.

А пока translateZ — ваш друг.

Связанные ссылки

• translateZ | MDN Web Docs
• Фильтр CSS | MDN Web Docs
• Приземление эффектов CSS фильтра в WebKit — упоминания о необходимости translateZ еще в 2011 году | Chrome Developers
• Повышение производительности вашего сайта с помощью CSS с аппаратным ускорением | Treehouse
• Повышение производительности HTML5-приложений с помощью CSS-переходов с GPU-ускорением | Urban Insight ********
• CSS GPU-анимация: Делаем правильно | Smashing Magazine
• Web Performance Fundamentals — указывает, что translateZ все еще необходим для получения аппаратного ускорения CSS-анимации на некоторых платформах | MDN Web Docs
• Твит Энди Нго — предлагает translate3d версию того же трюка | Twitter