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

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

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

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

Я не нашел здесь ответа, объясняющего это. Можно выполнить множество преобразований, вычислив каждый из параметров 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 получит от этого выгоду.

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