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

Question

当硬件加速被激活（通过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 通常是硬件加速的方式。

Answer 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);
}