CSS 过渡不适用于 chrome 45 中的 scale(0) + 硬件加速？

Posted 2023-03-06

【中文标题】CSS 过渡不适用于 chrome 45 中的 scale(0) + 硬件加速？

【英文标题】：CSS transition not working with scale(0) + hardware acceleration in chrome 45?

【发布时间】：2015-12-11 20:29:38

【问题描述】：

当硬件加速被激活（通过will-change 或translateZ(0)）并且您在 chrome 45 中与scale(0) 之间进行动画时，CSS 过渡不起作用。（版本 45.0.2454.85（64 位） )

（Firefox 40 适用于will-change，但不适用于translateZ(0)）

演示：http://codepen.io/zapdev/pen/ojbdVb （启用硬件加速和隐藏动画停止工作）

我目前的解决方法：

.hide 
    transform: scale(0.0002);
    opcacity: 0;
    transition: transform 400ms, opacity 0ms 400ms;
    pointer-events: none;

编辑： 我在 MacOS X 上，我的 WebGL 渲染器是 "Intel Iris Pro OpenGL Engine"

另外：Chrome 47.0.2511.0 canary (64-bit) 与 will-change 一起工作（如 Firefox 40），但不适用于translateZ(0)。看起来will-change 通常是硬件加速的方式。

【问题讨论】：

发布了一个新版本 45.0.2454.93 m。尝试更新您的浏览器。我已经打开了您的代码笔，在上述版本中一切看起来都很好（启用了硬件加速）。希望这会有所帮助，干杯

仍然无法在 45.0.2454.93 上为我工作（我最后没有 m）。顺便说一句，我在 Mac 上。

很抱歉听到这个消息...我已经在 win7 64 位上进行了测试。假设你的代码写得很好，如果你还没有这样做，请尝试在chromium.org 报告错误部分打开一张票。

在 Windows 7 上的 Google Chrome 45.0.2454.99 m 上测试；它有效！

【参考方案1】：

浏览器不知道如何读取转换覆盖。 当你使用 transform:translateZ('value');你覆盖了比例。

为了让它工作，你需要用 scale 和 translateZ 初始化所有 div，这样它就可以在所有方面工作。

VIEW DEMO

div
  transition: transform 400ms;
  transform:scale(1) translateZ(0);


div:hover
  transform: scale(1.4) translateZ(0);


div.hide
  transform: scale(0) translateZ(0);
 

【讨论】：

您的示例有效，但问题不在于比例被覆盖。 （如果这是问题，悬停过渡也会失败。）问题是它不能插值，因为矩阵插值不能反转 scale(0) 关键帧。更多信息：code.google.com/p/chromium/issues/detail?id=535094#c6