translateZ(0) 对 CSS 性能的影响
translateZ(0) 的使用被认为是一种提高效率的性能技巧动画和过渡。然而,盲目地全面应用这种转换会产生潜在的后果。
有什么影响?
对所有元素应用translateZ(0)会创建一个新的堆叠上下文和包含块。这意味着经过变换的固定位置元素将像绝对位置元素一样起作用。此外,z-index 值可能会出现意外行为。
实践中的后果:
如本演示所示,当任何元素接收 3D 变换时,它都会建立一个新的堆叠上下文。因此,伪元素位于其上方而不是其内部。
建议:
要避免这些问题,请将 3D 转换的使用限制在性能有利的情况下是真正需要的。或者,考虑使用transform:translateZ(0)translate3d(0,0,0)来利用3D加速,而不会产生堆叠问题。但请注意,此选项仅在 Safari 中受支持。
以上是TranslateZ(0) 总是能提高 CSS 性能吗?的详细内容。更多信息请关注PHP中文网其他相关文章!