不同浏览器中的转换比例（）与宽度/高度答案

【问题标题】：Transitions scale() vs. width/height in different browsers不同浏览器中的转换比例（）与宽度/高度
【发布时间】：2013-01-13 01:01:36
【问题描述】：

我偶然发现了一个大问题，firefox 无法以正常质量渲染scale()，所以我决定去设置width/height/top/left 并转换它。但是现在 chrome 的渲染质量很低，几乎 5-8 FPS，而 safari 只是介于两者之间并显示最终结果。

我了解到，如果您想为 chrome 触发 GPU 渲染，您只需将 translate3d() 或 'translateZ()' 添加到您的 -webkit-transform 值，但这将不再有帮助。

另一件事是，我不能真正依赖计算机的 GPU 性能，因为我需要尽可能平滑动画。

【问题讨论】：

【解决方案1】：

为了触发 GPU 渲染，您添加了以下内容：

.selector { transform: scale(1) rotate(0deg) translate3d(0,0,0); }

即使 translate3d 为 0,0,0，它也会触发硬件加速，但没有看到您的代码，我不确定还有什么可以推荐的？

【讨论】：

所以我发现了问题，问题是我必须调整 PNG 的大小。因为 Chrome 和 Safari 是 Quality > Performance ，所以计算所有 png 的成本非常高，这就是为什么宽度/高度如此糟糕的原因。但如果我使用 scale，Chrome 和 Safari 会对这些图像进行成本更低的计算。
我会接受你的答案，即使你不是真正的答案：D
skmasq，我知道这可能有点晚了，但是缩放 PNG 的父级而不是 PNG 本身呢？
好吧，这真的没关系，因为 FF 在大量 2d 和 3d 动画方面的表现非常糟糕，我实际上并没有研究为什么会这样，但我已经尝试了很多东西并使用FF中的转换是可怕的。这就是为什么我切换到 GreenSock Tween 插件，它会随着时间的推移而不是帧动画。为我节省了很多时间。
skmasq.. FF 在进行 2d 或 3d 变换时性能并不差。您只需正确应用变换！我使用 GSAP Tween 插件，它很棒，但它只是一个工具，为跨浏览器设置正确的动画方式。所以说 Firefox 转换很糟糕，是不正确的，即使没有 GSAP，它们在正确应用时表现也很好！