В ряде блогов говорится о приросте производительности за счет «обмана» графического процессора, чтобы он думал, что элемент является трехмерным, с помощью transform: translateZ(0) для ускорения анимации и переходов. Мне было интересно, есть ли последствия для использования этого преобразования следующим образом:
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
Преобразования 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) не влияет на то, что вы видите. Он перемещает объект на 0 пикселей по осям x, y и z. Это всего лишь метод принудительного аппаратного ускорения.
Полезно прочитать здесь: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
Я могу засвидетельствовать тот факт, что -webkit-transform: translate3d(0, 0, 0); будет иметь дело с новым свойством position: -webkit-sticky;. С шаблоном навигации в левом ящике, над которым я работал, аппаратное ускорение, которое я хотел с помощью свойства преобразования, мешало фиксированному расположению моей верхней панели навигации. Я отключил преобразование, и позиционирование работало нормально.
К счастью, у меня, похоже, уже было включено аппаратное ускорение, потому что у меня было -webkit-font-smoothing: antialiased в элементе html. Я тестировал это поведение в iOS7 и Android.
На мобильных устройствах отправка всего в GPU вызовет перегрузку памяти и сбой приложения. Я столкнулся с этим в приложении для iPad в Кордове. Лучше всего отправлять в GPU только необходимые элементы, те элементы div, которые вы специально перемещаете.
Еще лучше использовать 3D-преобразования transitions для создания анимации, например, translateX(50px), а не left:50px;
-o-transform: translateZ(0)никогда не было чем-то особенным. caniuse.com/#search=translate3d - person Volker E. schedule 03.01.2017