CSS转换不能与刻度(0)+硬件加速在铬45？

Question

当激活硬件加速(通过will-change或通过translateZ(0))时，CSS转换不起作用，并且您正在使用chrome 45中的scale(0)动画。(版本45.0.2454.85 (64位))

(Firefox40适用于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一起工作(如Firefox40)，但不适用于translateZ(0)。看起来，will-change通常是硬件加速的方法。

Answer 1

浏览器不知道如何读取转换覆盖。当您使用transform:translateZ(‘value’)时，您将覆盖缩放。

要使其工作，您需要使用scale和translateZ对所有div进行初始化，这样它将以各种方式工作。

视图演示

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

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

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