Производительность 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 83
css css3 performance translate-animation

5 ответов:

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

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

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

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

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

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

Использование -webkit-transform: translate3d(0,0,0); приведет к запуску графического процессора в действие для CSS-переходов, делая их более плавными (выше FPS).

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

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

13

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

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

7

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

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

5