是否可以在 CSS 宽度转换上强制硬件加速答案

【问题标题】：Is it possible to force hardware acceleration on a CSS width transition是否可以在 CSS 宽度转换上强制硬件加速
【发布时间】：2015-02-23 22:12:11
【问题描述】：

我注意到当我使用 CSS 过渡更改元素的宽度或边距时，性能会出现抖动。

有没有强制硬件加速？有什么方法可以使用变换属性来实现非常相似的结果？

【问题讨论】：

你能举个例子吗？我想看看你的意思。
在手机上。以后会做。谢谢
你总是可以在你想要的元素上scaleX(2.0)，在它的子元素上scaleX(0.5)。这是一个非常糟糕的解决方案，因为内容不会重排到新的大小。
@josh。可以在隐藏溢出的情况下工作。
我看不出overflow: hidden 有什么帮助，因为内容将在两倍宽的容器中保持其原始大小。确实，您需要在调整大小后动态添加内容。如果不包含某种 JavaScript，我无法凭直觉知道如何做到这一点。它可能不是很多 JavaScript，但需要结合 JavaScript 和兄弟 div 的分层，至少可以说是混乱的。

【解决方案1】：

不是真的。硬件加速取决于很多因素，它们都不受 javascript 控制。

这给我们留下了如何提高 CSS 宽度/边距过渡性能的问题，而答案通常是“用缩放替换它”，因为它可以在 GPU 上廉价地完成，而且它不会触发重排。

众所周知，Chrome 在加速 CSS 转换方面的表现不如 Firefox 和 IE。

事实上，鉴于 Google 拒绝了 Pointer Event on the ground of speed，即 IE solved by GPU acceleration，可以说 Chrome（以及一般的 Webkit - Safari 更慢）在这方面落后了，也是唯一的方法帮助是contributing code to Chromium / Webkit。

我宁愿切换到更快的过渡。

【讨论】：