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

问题描述

Iv'e一直在为iPad和其他平板电脑编写webapp，并且在很多视口问题后，就适当和有效的定位和动画而言。我最近想出了使用-webkit-transform我的所有自由浮动元素的想法。我的问题是，使用CSS规范提供的转换更好的平滑和可靠的动画比例如更改在中的lrtb值position：relative elements？
随着硬件加速，我发现在移动元素中发生了随机闪烁，特别是在方向变化时。 （绝对定位的元素）所以，看到没有值得注意的博客使用这种方法，我想检查是否有一些pro-tip的原因这是一个坏主意。

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/

目前，大多数浏览器只在使用GPU加速时，才会强烈表示HTML元素会从中受益。最强的指示是对其应用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屋！