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

Ответ 1

-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. Для получения дополнительной информации см. в этой статье.

Ответ 2

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

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

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

Чтобы ответить на ваш вопрос, 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);
}

Ответ 3

Там есть ошибка с прокруткой в ​​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);
}

Ответ 4

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

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

Ответ 5

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