Несколько блогов выразили усиление производительности при "обмане" графического процессора, чтобы думать, что элемент 3D, используя 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) ничего не делает с точки зрения того, что вы видите. он перемещает объект на 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.
На мобильных устройствах, отправляющих все на GPU, будет возникать перегрузка памяти и сбой приложения. Я столкнулся с этим в iPad-приложении в Кордове. Лучше всего отправлять нужные предметы на GPU, те div, которые вы специально перемещаете.
Еще лучше, используйте преобразования 3d transitions, чтобы делать анимации наподобие translateX (50px), а не слева: 50px;