CSS3 动画让看似无关的元素在 Mac/Webkit 中消失答案

【问题标题】：CSS3 animations make seemingly unrelated elements disappear in Mac/WebkitCSS3 动画让看似无关的元素在 Mac/Webkit 中消失
【发布时间】：2012-10-10 17:42:27
【问题描述】：

我有一个使用许多简单动画的页面，包括一些 JavaScript 动画，这些动画将 CSS 类添加/删除到具有 CSS3 动画以进行旋转的元素。我没有使用画布。

在 PC 上，该页面在 Chrome/Safari、Firefox 和 IE 中看起来很棒，但在 Mac 上，在 WebKit（Chrome 和 Safari 5.0.3）中查看时，页面上的许多元素完全缺失.在 Mac 上的 Firefox 中看起来不错。缺少的元素没有应用任何动画——我看不出它们与动画之间有任何联系。

页面验证，CSS 几乎验证除了供应商扩展和我 clearfix 中的缩放属性。禁用页面上的所有 JavaScript 不会改变任何东西。缺少的元素在源代码中，它们只是在页面上不可见。

乍一看，Z-index 似乎在不可见元素上变得扭曲了。更改这些不会影响问题。删除整个文档中的所有绝对、相对、固定位置以及浮动元素不会影响问题。唯一能做任何事情的动作是删除所有 Webkit 动画。
当我应用所有动画时，页面上的几乎所有内容都消失了！

这是我的一个动画示例——简单的东西：

@-webkit-keyframes propeller {
    0% {-webkit-transform: rotateX(90deg);}
    50% {-webkit-transform: rotateX(1deg);}
    100% {-webkit-transform: rotateX(90deg);}
}

#element {
    -webkit-animation:propeller 1s linear;
    -webkit-transform-origin:50% 50%;
}

即使没有调用动画，关键帧的存在也会导致页面中断。如果我特别使用这个动画（只是 -webkit- vendor 前缀），它会导致一个大型表单消失，它是“#element”的伟大祖先的兄弟。

这是我正在处理的页面的链接。我与设计无关： http://goo.gl/6XXcV

所有动画都包含在animations.css中，所有JavaScript动画都包含在general.js中。

这对我来说一直很慢，因为我没有 Mac——我只是使用 Microsoft Expression Web 4 SuperPreview——但我的客户有一台 Mac，并没有留下深刻的印象。提前感谢您的任何建议。

【问题讨论】：

标签： css animation webkit

【解决方案1】：

我刚刚在 Mac 版 Chrome 和 Mac 版 Firefox（分别为 22.0.1229.94 和 14.0.1 版本）中提取了该站点，除了一些间距差异（很小）外，外观相同。我看到的唯一奇怪的事情是，如果您的窗口足够窄以保证（看似不必要的）水平滚动，那么所有图形旁边都会出现浅蓝色背景。

究竟缺少什么？

【讨论】：

非常感谢您的帮助和提及其他错误。如果我检查 Expression Web 的 Safari (Mac) 5.0.3 服务中的页面，页面上几乎所有元素（我的意思是所有内容——所有博客文章、菜单、表单和所有文本）都丢失了，除了对于页面顶部和底部的大背景图像。如果我开始注释掉 Webkit 动画，则元素开始以不合逻辑的顺序重新出现，直到所有 Webkit 动画都被删除并且整个页面按应有的方式呈现。

【解决方案2】：

在很大程度上，问题出在 Microsoft Expression Web 4 SuperPreview 及其 Mac/Safari 5.0.3 仿真器服务中的错误。当任何 -webkit- 供应商前缀用于 CSS3 动画时，它会导致看似与动画无关的元素表现得好像它们具有可见性：隐藏。

我的客户首次使用带有 Chrome 的实际 Mac 报告的元素消失的类似问题似乎来自与 @font-face 一起使用的错误 .svg 字体转换。尽管 svg 字体在 Mac/Webkit 上呈现，但它似乎破坏了使用它的元素以及父元素的样式。当我使用不同的转换实用程序再次将字体转换为 svg 时，问题解决了。很奇怪。

【讨论】：