google-chrome - Chrome CSS3 3D 转换错误

Question

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

Answer 1

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

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

CSS3 transition events