CSS:过渡:左/上GPU加速了吗?

CSS:过渡:左/上GPU加速了吗?,css,webkit,css-transitions,Css,Webkit,Css Transitions,我知道,通过对“transform”属性应用转换,可以强制GPU加速以实现屏幕上元素的平滑动画,例如: elem.style.transition = 'all 3s ease-out'; elem.style.transform = 'translateX(600px)'; 但是我想知道如果你把第二行替换为: elem.style.left = '600px'; GPU加速是否会在“left”(或“top”)属性中起作用,还是必须在transform属性中起作用?在我看来,它应该是GPU

我知道,通过对“transform”属性应用转换,可以强制GPU加速以实现屏幕上元素的平滑动画,例如:

elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';
但是我想知道如果你把第二行替换为:

elem.style.left = '600px'; 

GPU加速是否会在“left”(或“top”)属性中起作用,还是必须在transform属性中起作用?在我看来,它应该是GPU加速的,但我无法从我读过的任何文档中获得最终答案

我达成的共识是,只有
translate3d
属性是移动设备(如mobile Safari)上的硬件加速


.

它不会加速。您必须使用特定的CSS3属性才能使其可加速。我想你会发现这些链接很有趣:


要想让您的问题有机会得到回答,您必须将其缩小到特定操作系统上特定浏览器的特定版本,并带有特定的图形子系统。所有这些都会影响答案,因为这不是规范中规定的内容——而是由特定操作系统/硬件上特定浏览器的实现者决定。有证据表明,有些浏览器使用GPU来加速某些CSS指令,而在某些情况下不加速其他指令,但即使是这样,也只能用上面的术语来讨论。嗯,我不太确定。。。我不是在寻找一个特定OS/GPU/browser/等的答案,我在寻找一个通用的答案,因为许多不同的OS/GPU/browser/等可能正在访问我的网站。如果最终的答案是“这取决于——所有操作系统/浏览器/等等都以不同的方式处理这一问题,所以不要依赖它”,那么这将是一个令人满意的答案。不管是哪种情况,似乎有人已经从不同的角度做出了回应。您检查的答案回答了您在某些类型的硬件上操作时,一个或两个浏览器的某些版本的问题。也许这就是你想要的,但是你的问题比我说的要普遍得多,这就是为什么我说必须在特定硬件上的特定实现的上下文中回答这个问题。没有任何东西表明使用javascript设置left属性和触发CSS转换不能或不会使用硬件加速,因此问题在于目前是否有任何浏览器在任何情况下都会使用硬件加速。为了向您展示这一点有多复杂,在Mac和iPhone 2上运行相同的浏览器核心(Safari),iphone3s和ipodtouch都可以在不同的CSS3转换中提供不同级别的硬件加速。即使是在同一个浏览器系列中,它也是非常具体的实现,从一个浏览器到下一个浏览器,从一个浏览器版本到下一个浏览器版本,更是如此。是的,正是这一页启发了我提出这个问题。它将基于计时器的每隔几毫秒更改左/顶的方法与使用transition/transform的基于CSS3转换的方法进行了对比,但不幸的是,它忽略了左/顶与“transition”的组合。太棒了!这个问题似乎在你发布的最后一个链接的后续评论中得到了回答。谢谢@knutole非常好的链接。谢谢