что делает -webkit-transform: translate3d (0,0,0); точно делать? Применить к телу?

89

что -webkit-transform: translate3d(0,0,0); именно делает? Есть ли проблемы с производительностью? Просто применить его к телу или отдельным элементам? Кажется, это значительно улучшает события прокрутки.

Спасибо за урок!

WIWIWWIISpitFire
источник
4
Какие ответы отсутствуют: фактически он переводит элемент на 0 пикселей по осям x, y и z. ;)
insertusernamehere
Это также влияет на рендеринг шрифтов, особенно это заметно при больших размерах шрифтов. В противном случае гладкие края снова будут отображаться с искажениями. Может быть, конкретный браузер или ОС, это можно было наблюдать в Chrome 33 в Windows 7.
patrickj
1
@patrickj Я также начал замечать несколько иное поведение translate3d(0,0,0)в Chrome 33 (33.0.1750.117m) в Windows 7. Это сделало один из моих элементов невидимым, поэтому я удалил его.
Дэвид Шеррет
2
Для справки в будущем: will-changeтакже разделит элемент html на собственный слой. developer.mozilla.org/en-US/docs/Web/CSS/will-change . will-changeзаменит -webkit-transform:translate3d(0,0,0)хак.
Джейсон Лайдон
не используйте его с * css-селектором, все мои ссылки стали неактивными :)
Стефан

Ответы:

112

-webkit-transform: translate3d(0,0,0); заставляет некоторые устройства запускать аппаратное ускорение.

Хорошо читать находится Здесь

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

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

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


Альтернатива есть -webkit-transform: translateZ(0). А если в Chrome и Safari мерцает из-за преобразований, попробуйте -webkit-backface-visibility: hiddenи -webkit-perspective: 1000. Для получения дополнительной информации обратитесь к этой статье .

Йотам Омер
источник
Я не уверен, действительно ли применение матричного преобразования к кэшированной текстуре повысит эффективность. Когда содержимое перемещается из кэшированной текстуры в буфер кадра, преобразование повысит производительность для сложных операций, но не принесет пользы для обычных событий рисования. Это не принесет ни вреда, ни пользы. Поправьте меня, если я ошибаюсь?
Мэтью Куриан
Я думаю, что даже обычная раскраска будет ускоряться ... один из критериев создания слоя - «3D или свойства CSS с перспективным преобразованием».
Йотам Омер
Например, карусель начальной загрузки использует это, перемещая отображаемое изображение справа налево.
Итан
@YotamOmer Можем ли мы в качестве альтернативы использовать translateZ (0) или scale3d (1,1,1) для включения ч / б ускорителя?
Итан
1
@Ethan Да, согласно этому оба должны работать. Я знал только о трехмерном преобразовании, но, по-видимому, translateZон также поможет в большинстве браузеров.
Йотам Омер
12

Я не нашел здесь ответа, объясняющего это. Можно выполнить множество преобразований, вычислив каждый из параметров divи их параметры с помощью сложного набора проверок. Однако, если вы используете функцию 3D, каждый из имеющихся у вас 2D-элементов рассматривается как 3D-элементы, и мы можем выполнять матричное преобразование этих элементов на лету. Однако большинство элементов «технически» уже аппаратно ускорены, потому что все они используют графический процессор. Но 3D-преобразования работают непосредственно с кэшированными версиями каждого из этих 2D-рендеров (или кешированных версий div) и напрямую используют для них матричное преобразование (которые представляют собой векторизованную и распараллеленную математику FP).

Важно отметить, что 3D-преобразования вносят изменения ТОЛЬКО в функции кэшированного 2D-блока (другими словами, этот блок уже является визуализированным изображением). Таким образом, такие вещи, как изменение ширины и цвета границы, больше не являются «трехмерными», если говорить неопределенно. Если подумать, изменение ширины границы потребует от вас повторной визуализации divи повторного кэширования, чтобы можно было применить трехмерные преобразования.

Надеюсь, это имеет смысл, и дайте мне знать, если у вас возникнут еще вопросы.

Чтобы ответить на ваш вопрос, translate3d: 0x 0y 0zя ничего не сделаю, так как преобразования работают непосредственно с текстурой, которая формируется путем запуска вершин divв шейдер графического процессора. Этот ресурс шейдера теперь кэшируется, и при рисовании в буфер кадра будет применяться матрица. Так что в принципе от этого нет никакой пользы.

Так работает браузер внутри.

Шаг 1: анализ ввода

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

Шаг 2: разработка составного слоя

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

Шаг 3: визуализация составного слоя

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}
Мэтью Куриан
источник
6

В MobileSafary (iOS 5) есть ошибка прокрутки, которая приводит к появлению артефактов в виде копий элементов ввода в контейнере прокрутки.

Использование translate3d для каждого дочернего элемента может исправить эту странную ошибку. Вот пример CSS, который спас меня.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}
Серж Селецкий
источник
5

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

В настоящее время браузеры, такие как Chrome, FireFox, Safari, IE9 + и последняя версия Opera, имеют аппаратное ускорение, они используют его только тогда, когда есть указание на то, что элемент DOM получит от этого выгоду.

Прасанна Аарти
источник
3

Имейте в виду , что он создает контекст стэка (плюс то , что другие ответы сказал), так что это потенциально оказывает влияние на то , что вы видите, например , делая что - то появляется над накладку , когда он не должен.

Джейсон Янг
источник