CSS 列中的 CSS 转换消失 (Chrome)答案

【问题标题】：CSS transforms within CSS columns disappear (Chrome)CSS 列中的 CSS 转换消失 (Chrome)
【发布时间】：2018-02-18 05:45:31
【问题描述】：

我遇到了可能只是 Chrome 中的一个错误，但我希望能得到另一个关注，并希望告诉我我是否在这里遗漏了什么。

问题：

我有一些 <li> 标签分布在三个 CSS 列 (column-count: 3) 上，每个项目都有一个 transform 属性。然后，当我去转换这些<li> 标记within 的子项时，第一列中not 的每个子项都会消失。

这是 CodePen 上的一个内置示例：https://codepen.io/andyranged/pen/WMdrxR

同样，这仅在 Chrome 中发生。提前感谢您提供的任何帮助！

【问题讨论】：

【解决方案1】：

实际上问题是您在ul.main > li 中的transform: translateY(0px) 是一个2D 变换...然后您在ul.main ul a 中使用rotateZ 这是导致此可见性问题的3D 变换...

因此，要解决此问题，要么从 ul.main > li 中删除 transform: translateY(0px)，我认为这更好，因为它无法应用 translateY(0px)...

..如果您有任何进一步使用translateY(0px) 的计划，请将backface-visibility: hidden 应用于ul.main ul a

ul.main ul a {
  -webkit-transform: rotateZ(5deg);
  transform: rotateZ(5deg);
  backface-visibility: hidden;
}

【讨论】：

感谢您的回答！这很奇怪——在这种特殊情况下，它似乎与rotateZ 是一个 3D 变换没有特别的关系。如果我将那些子 <a> 标签更改为简单的 translateX(15px)（这是一个 2D 转换），问题仍然存在。无论哪种方式，您的答案都是正确的，因为它最终是backface-visibility 问题！顺便说一句 - 我完全同意你的观点，父元素上的 translateY(0) 是无用的（哈哈），但它存在的原因是因为在实践中，我将这些元素从 translateY(2em) 动画化到 translateY(0em)。
我还想问一下你是否认为这种行为仍然存在问题......如果它在第一列中有效，那么它不应该在后续列中使用 no i> backface-visibility 财产？（假设我只使用 2D 变换）？
这也解决了我的问题。我不认为问题是混合使用 2d 和 3d 变换，我认为浏览器应该能够处理它。我会说这是一个错误。
只是一个更新：这确实是一个错误。我提交了一份 Chromium 错误报告，它已经在几个版本的 Chrome 之前得到了解决！