CSS производительность относительно translateZ(0)

Ряд блогов выразили прирост производительности в "обмане" графического процессора, чтобы думать, что элемент является 3D с помощью transform: translateZ(0) ускорить анимацию и переходы. Мне было интересно, есть ли последствия использования этого преобразования следующим образом:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
Источник

5 ответов

Решение

CSS-преобразования создают новый контекст стекирования и содержащий блок, как описано в спецификации. В простом английском языке это означает, что элементы с фиксированным положением с примененным к ним преобразованием будут действовать как абсолютно позиционированные элементы, и z-index значения могут быть испорчены.

Если вы посмотрите на эту демонстрацию, вы поймете, что я имею в виду. Ко второму элементу div применяется преобразование, означающее, что он создает новый контекст стека, а псевдоэлементы располагаются сверху, а не снизу.

В общем, не делай этого. Применяйте 3D-преобразование только тогда, когда вам нужна оптимизация. -webkit-font-smoothing: antialiased; это еще один способ задействовать 3D-ускорение без создания этих проблем, но он работает только в Safari.

Источник

Если вы хотите, чтобы последствия были, в некоторых сценариях производительность Google Chrome ужасна с включенным аппаратным ускорением. Как ни странно, меняя "трюк" на -webkit-transform: rotateZ(360deg); работал просто отлично.

Я не верю, что мы когда-либо выяснили почему.

Источник

Это заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору (GPU) устройства, чтобы заставить пиксели летать. С другой стороны, веб-приложения выполняются в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, что приводит к меньшей мощности для переходов. Но Интернет догонял, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.

С помощью -webkit-transform: translate3d(0,0,0); активирует GPU для переходов CSS, делая их более плавными (более высокий FPS).

Замечания: translate3d(0,0,0) ничего не делает с точки зрения того, что вы видите. Перемещает объект на 0px по осям x,y и z. Это всего лишь техника форсирования аппаратного ускорения.

Хорошо читать здесь: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Источник

Я могу засвидетельствовать тот факт, что -webkit-transform: translate3d(0, 0, 0); возиться с новым position: -webkit-sticky; имущество. С шаблоном навигации в левом ящике, над которым я работал, аппаратное ускорение, которое я хотел получить со свойством transform, шло вразрез с фиксированным расположением моей верхней навигационной панели. Я отключил преобразование, и позиционирование работало нормально.

К счастью, у меня, кажется, уже было аппаратное ускорение, потому что у меня было -webkit-font-smoothing: antialiased на элемент HTML. Я тестировал это поведение в iOS7 и Android.

Источник

На мобильных устройствах отправка всего на графический процессор вызовет перегрузку памяти и приведет к сбою приложения. Я столкнулся с этим в приложении для iPad в Кордове. Лучше всего отправлять только необходимые элементы в графический процессор, элементы div, которые вы специально перемещаете.

А еще лучше, используйте преобразования трехмерных переходов для анимации, например translateX(50px), а не слева:50px;

Источник
Другие вопросы по тегам