css - 为什么 Isotope 不使用 3d 变换来提高性能？

Question

我正在使用具有 Masonry Horizo​​ntal 布局的 Isotope ( isotope.metafizzy.co)。例子: http://codepen.io/desandro/pen/oCiAD

它工作得很好，但我很好奇为什么库设置左/右和上/下属性而不是使用转换。我的理解是使用 3D，例如

transform: translateZ(0);

或

transform: translate3d(0,0,0);

将强制元素到另一层，触发 GPU 渲染和更好的性能。我意识到这可能是有意为之，但我不清楚原因。

浏览器是否有所改进，是否不再需要？如果没有，有没有办法在 Isotope 中启用 3d 转换？

提前致谢。

Answer 1

我认为原因之一可能是 Webkit 将 3d 转换元素视为纹理而不是矢量，以提供硬件 3d 加速，这可能会导致文本模糊或抗锯齿问题。

例子:

http://jsfiddle.net/gibbok/ccw7vvvg/

-webkit-transform: translate3d(0px, 100px, 0px);