CSS 转换与更改绝对定位值 [英] CSS translation vs changing absolute positioning values

问题描述

我一直在为 iPad 和其他平板电脑编写 web 应用程序，并在许多视口问题之后就正确和高效的定位和动画而言.我最近想出了对所有自由浮动元素使用 -webkit-transform 的想法.我的问题是，使用 CSS 规范提供的转换是否比例如更改 position:relative 元素内的 lrtb 值更适合平滑和可靠的动画?启用硬件加速后，我发现移动元素中会发生随机闪烁，尤其是在方向变化期间.(绝对定位的元素)所以，鉴于没有著名的博客使用这种方法，我想检查一下是否有一些专业提示，这是一个坏主意.

Iv'e been writing a webapp for iPad and other tablets and after a lot of viewport issues as far as proper and efficient positioning and animation is concerned. I recently came up with the idea of using -webkit-transform for all my free floating elements. My question is, Would using the transformations provided by the CSS spec be better for smooth and reliable animations than for example changing the lrtb values inside position:relative elements? With hardware acceleration on, I'm finding random blinking happening in moving elements, especially during changes in orientation. (absolutely positioned elements) So, seeing as no notable blogs use this method, I wanted to check if there was some pro-tip reason it's a bad idea.

推荐答案

使用变换而不是位置可以获得更好的性能.

it is possible to achieve better performances with transform rather than position.

我将引用这篇优秀文章中的一些内容，但您应该真正阅读它以了解全貌:

I'll quote a few bits from this excellent article, but you should really read it to get the whole picture:

http://www.html5rocks.com/en/tutorials/speed/html5/

目前，大多数浏览器仅在有强烈迹象表明 HTML 元素将从中受益时才使用 GPU 加速.最强烈的迹象是对它应用了 3D 变换.现在您可能并不真的想要应用 3D 转换，但仍然可以从 GPU 加速中获益——没问题.只需应用身份转换:

Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. The strongest indication is that a 3D transformation was applied to it. Now you might not really want to apply a 3D transformation, but still gain the benefits from GPU acceleration - no problem. Simply apply the identity transformation:

-webkit-transform: translateZ(0);

这背后的原因是，您将 CPU 必须做的一些工作委托给 GPU，但要考虑周到，因为这不一定总是值得的，尤其是在 iPad 等移动设备上，即您的环境:

reason behind this, is that you delegate some of the work that the CPU has to do, to the GPU, however be considerate as this won't necessarily be always worth, especially on a mobile device like the iPad, that is your environment:

请注意，应用此转换并不能保证对您的表现有帮助.它可能只是简单地启动你的 GPU，消耗更多的电池，但提供与以前相同的性能.因此，请谨慎使用此技术，并且仅当您体验到真正的性能优势时才使用它.

Please be warned that this applying this transformation does not guarantee to help your performance. It might simply crank up your GPU, use up more battery but deliver the same performance as before. So be careful with this technique and only use it if you experience a true performance win.

这篇关于CSS 转换与更改绝对定位值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！