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

Question

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

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

* {

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

}

684 5

css performance css3 translate-animation

5 ответов:

Comments

Ничего не найдено.

Dan Eden · Accepted Answer · 2012-05-30 13:41:37

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

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

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

o.v. · Accepted Answer · 2017-05-23 14:54:37

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

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

Neo · Accepted Answer · 2018-04-16 22:55:11

это заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройства (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/

J. Hogue · Accepted Answer · 2014-05-09 17:32:15

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

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

Perry · Accepted Answer · 2014-01-09 21:46:23

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

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