CSS：transition属性：left/top是否支持GPU加速？

Question

我知道你可以通过对“transform”属性应用过渡效果来强制使用GPU加速，以实现元素在屏幕上的平滑动画，例如：

elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';

但我想知道如果你将第二行替换为什么会发生：

elem.style.left = '600px'; 

GPU加速会对“left”（或“top”）属性生效吗？还是必须在变换属性上才能生效？看起来应该可以GPU加速，但我从阅读的任何文档中都无法得出最终答案。

- Alexander Wallace Matchneer

---

为了让你的问题有任何被回答的机会，你必须将其缩小到特定操作系统上特定浏览器的特定版本，并且还要考虑特定图形子系统。所有这些因素都可能影响答案，因为这不是规范中明确说明的内容 - 它取决于特定浏览器在特定操作系统/硬件上的实现者。有证据表明，某些浏览器在某些情况下使用GPU加速某些CSS指令而不是其他指令，但即使如此，也只能用以上术语来谈论它。 - jfriend00

嗯，我不太确定...我不是在寻找特定操作系统/ GPU /浏览器等的答案，我正在寻找一个通用的答案，因为许多不同的操作系统/ GPU /浏览器等可能会访问我的网站。如果答案最终是“这取决于--所有操作系统/浏览器等都以不同的方式处理此问题，因此不要依赖它”，那将是一个令人满意的答案。无论如何，似乎已经有人从不同的角度做出了回应。 - Alexander Wallace Matchneer

你所查看的答案回答了你在某些浏览器版本上在某些硬件类型上操作时的问题。也许这就是你想要的，但是你的问题比这个要一般得多，这就是为什么我说它必须在特定硬件上的特定实现的上下文中回答。没有任何东西表明使用javascript设置左属性并触发CSS转换不能或不会使用硬件加速-因此问题是是否有任何浏览器在任何情况下当前使用。 - jfriend00

为了向您展示这个问题有多么复杂，同一浏览器内核（Safari）在Mac、iPhone 2、iPhone 3s和iPod Touch上运行时，不同的CSS3过渡效果可以提供不同级别的硬件加速。即使在同一浏览器系列中，甚至从一个浏览器到另一个浏览器以及一个浏览器版本到另一个浏览器版本之间，实现也是非常特定的。 - jfriend00

Answer 1

它不是加速的。您必须使用特定的CSS3属性才能进行加速。我认为您会发现以下链接很有趣：

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

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

通过javascript动画化CSS3 transform的值是否会排除硬件加速？

- trusktr

---

太好了！看起来你在上次发布的链接中的跟进评论中回答了这个问题。谢谢！ - Alexander Wallace Matchneer

@knutole 很好的链接。谢谢！ - trusktr

Answer 2

我收集到的共识是，只有像Mobile Safari这样的移动设备上，translate3d属性才能得到硬件加速。

进一步阅读。

- alex

---

是的，这就是激发我发布这个问题的页面。它对比了基于计时器的每几毫秒更改左/上方向的方法和使用转换/变形的CSS3过渡方法，但不幸的是它忽略了left/top与'transition'相结合的方法。 - Alexander Wallace Matchneer