javascript - 3D CSS 变换 : translateZ causes elements to disappear in Chrome

Question

我正在使用 Javascript 在 Chrome 中操作 CSS 转换，我注意到当 translateZ 值变得太低(很远)时，元素将会消失。这似乎只有在有大量元素时才会发生。

这似乎与元素的z-index有关。

这是问题的一个例子: http://jsbin.com/iZAYaRI/26/edit

将鼠标悬停在输出上以查看问题。

有人知道为什么会这样吗？

---

更新:看起来该元素并没有真正消失，而是移动了一千个像素左右。

Answer 1

在我的例子中，z 平移属性大约为零。将我的零翻译从 0 更改为 1 解决了我的问题。

在 safari 中运行的原始代码:transform: scale3d(2,2,0) translate3d(0, -20px, 60px);

代码在 chrome 中工作:transform: scale3d(2,2,1) translate3d(0, -20px, 60px);

希望对你有用。

干杯。