что делает -webkit-transform: translate3d (0,0,0); точно делать? Применить к телу?
89
что -webkit-transform: translate3d(0,0,0); именно делает? Есть ли проблемы с производительностью? Просто применить его к телу или отдельным элементам? Кажется, это значительно улучшает события прокрутки.
Какие ответы отсутствуют: фактически он переводит элемент на 0 пикселей по осям x, y и z. ;)
insertusernamehere
Это также влияет на рендеринг шрифтов, особенно это заметно при больших размерах шрифтов. В противном случае гладкие края снова будут отображаться с искажениями. Может быть, конкретный браузер или ОС, это можно было наблюдать в Chrome 33 в Windows 7.
patrickj
1
@patrickj Я также начал замечать несколько иное поведение translate3d(0,0,0)в Chrome 33 (33.0.1750.117m) в Windows 7. Это сделало один из моих элементов невидимым, поэтому я удалил его.
Собственные приложения могут получить доступ к графическому процессору (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в шейдер графического процессора. Этот ресурс шейдера теперь кэшируется, и при рисовании в буфер кадра будет применяться матрица. Так что в принципе от этого нет никакой пользы.
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);
}
Translate3D форсирует аппаратное ускорение. CSS-анимации, преобразования и переходы не ускоряются автоматически с помощью графического процессора , а вместо этого выполняются из более медленного программного движка рендеринга браузера. Для использования графического процессора мы используем translate3d
В настоящее время браузеры, такие как Chrome, FireFox, Safari, IE9 + и последняя версия Opera, имеют аппаратное ускорение, они используют его только тогда, когда есть указание на то, что элемент DOM получит от этого выгоду.
Имейте в виду , что он создает контекст стэка (плюс то , что другие ответы сказал), так что это потенциально оказывает влияние на то , что вы видите, например , делая что - то появляется над накладку , когда он не должен.
translate3d(0,0,0)
в Chrome 33 (33.0.1750.117m) в Windows 7. Это сделало один из моих элементов невидимым, поэтому я удалил его.will-change
также разделит элемент html на собственный слой. developer.mozilla.org/en-US/docs/Web/CSS/will-change .will-change
заменит-webkit-transform:translate3d(0,0,0)
хак.Ответы:
-webkit-transform: translate3d(0,0,0);
заставляет некоторые устройства запускать аппаратное ускорение.Хорошо читать находится Здесь
Использование
-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
. Для получения дополнительной информации обратитесь к этой статье .источник
translateZ
он также поможет в большинстве браузеров.Я не нашел здесь ответа, объясняющего это. Можно выполнить множество преобразований, вычислив каждый из параметров
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); }
источник
В 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); }
источник
Translate3D форсирует аппаратное ускорение. CSS-анимации, преобразования и переходы не ускоряются автоматически с помощью графического процессора , а вместо этого выполняются из более медленного программного движка рендеринга браузера. Для использования графического процессора мы используем translate3d
В настоящее время браузеры, такие как Chrome, FireFox, Safari, IE9 + и последняя версия Opera, имеют аппаратное ускорение, они используют его только тогда, когда есть указание на то, что элемент DOM получит от этого выгоду.
источник
Имейте в виду , что он создает контекст стэка (плюс то , что другие ответы сказал), так что это потенциально оказывает влияние на то , что вы видите, например , делая что - то появляется над накладку , когда он не должен.
источник