Chrome CSS3 3D 变换错误

Question

我有 css 对 3d 空间中的元素进行卡片翻转。它工作得很好，除了当您向上和向下滚动页面时，您会随机在 Chrome 中的某些位置在页面上显示白色元素。我在 facebook 选项卡中附加了一张图片作为示例。在 chrome windows 中，白色“框”有时会掩盖内容。当我注释掉 3d 变换 css 时，这不会发生。这是做 3d 东西的 css 的小提琴 (http://jsfiddle.net/derekaug/QSEvs/)。不幸的是，我还不能链接到实际的标签，因为它不是公开的。

Answer 1

我之前遇到过这样的问题，并不是说它肯定会起作用，而是我修复它的方法是在不使用元素时从元素中删除所有转换 css 属性。

也就是说，仅在动画打开时应用变换属性。这意味着在您的示例中，为每个具有所有变换属性的动画创建 2 个类，并删除基类上的那些。然后单击应用适当的类，并在转换结束后立即删除该类。当过渡结束时，会在元素上触发一个 javascript 回调，让您可以删除该类：

CSS3 transition events