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

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

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

Источник

6 ответов

Решение

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

Хорошее чтение найдено здесь

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

С помощью -webkit-transform: translate3d(0,0,0); активирует GPU для переходов CSS, делая их более плавными (более высокий FPS).

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

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

Источник

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

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

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

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

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

Шаг 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-анимации, преобразования и переходы не ускоряются GPU автоматически, а вместо этого выполняются из более медленного движка рендеринга программного обеспечения браузера. Для использования графического процессора мы используем translate3d

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

Источник

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

Источник

Я использую mathlive и Tiptap, и в моем случае эта строка вызывала непреднамеренную прокрутку вверх страницы во время редактирования формул.

Источник
Другие вопросы по тегам