В ряде блогов отмечается повышение производительности за счет «обмана» графического процессора, заставляющего думать, что элемент является трехмерным, с помощью transform: translateZ(0)ускорения анимации и переходов. Мне было интересно, есть ли последствия для использования этого преобразования следующим образом:
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
performance
css
translate-animation
Ахмед Нуаман
источник
источник
-o-transform: translateZ(0)никогда не было. caniuse.com/#search=translate3dОтветы:
Преобразования CSS создают новый контекст наложения и содержащий блок, как описано в спецификации. Проще говоря, это означает, что элементы с фиксированным положением с примененным к ним преобразованием будут действовать больше как элементы с абсолютным позиционированием, и
z-indexзначения, вероятно, будут запутаны.Если вы посмотрите эту демонстрацию , вы поймете, что я имею в виду. Ко второму div применяется преобразование, то есть создается новый контекст наложения, а псевдоэлементы размещаются сверху, а не снизу.
В общем, не делайте этого. Применяйте трехмерное преобразование только тогда, когда вам нужна оптимизация.
-webkit-font-smoothing: antialiased;- еще один способ задействовать 3D-ускорение, не создавая этих проблем, но он работает только в Safari.источник
Если вам нужны последствия, в некоторых сценариях производительность Google Chrome ужасна с включенным аппаратным ускорением . Как ни странно, изменение "трюка" на
-webkit-transform: rotateZ(360deg);сработало нормально.Я не думаю, что мы когда-либо понимали почему.
источник
Он заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору (GPU) устройства, чтобы пиксели летали. С другой стороны, веб-приложения запускаются в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, что приводит к меньшим потребностям в переходах. Но Интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.
Использование
-webkit-transform: translate3d(0,0,0);заставит графический процессор задействовать переходы 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;собственность. С шаблоном навигации левого ящика, над которым я работал, аппаратное ускорение, которое я хотел с помощью свойства transform, мешало фиксированному позиционированию моей верхней панели навигации. Я отключил преобразование, и позиционирование работало нормально.К счастью, у меня уже было аппаратное ускорение, потому что у меня был
-webkit-font-smoothing: antialiasedэлемент html. Я тестировал это поведение на iOS7 и Android.источник
На мобильных устройствах отправка всего на графический процессор вызовет перегрузку памяти и приведет к сбою приложения. Я столкнулся с этим в приложении для iPad в Кордове. Лучше всего отправлять в графический процессор только необходимые элементы, которые вы специально перемещаете.
А еще лучше использовать 3d
преобразованияпереходовдля создания анимации, например translateX (50px), а не left: 50px;источник