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

标签 google-chrome css css-transitions css-transforms

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

Example

最佳答案

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

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

CSS3 transition events

关于google-chrome - Chrome CSS3 3D 转换错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10601359/

相关文章:

html - 将屏幕分成 4 个象限,每个象限都有边框

类似于 Photoshop ColorPicker 的 CSS3 透明渐变

html - 为什么 <p> 高度为 0% 时仍然可见

python - Selenium webdriver 在 chrome ://downloads 找不到元素

javascript - 在谷歌浏览器中刷新后复选框未选中

javascript - 动画 gif 在 Chrome 和 Firefox 中只循环一次

javascript - 是否可以从扩展程序调用父网页的 iframe 中的函数

c# - 如何使用网页编程制作文字曲线效果。首选(c#、vb javascript 或 jquery)

html - css中的曲线形状纸

CSS Transitions 交换函数