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

Question

我有一个页面使用了一些简单的动画，包括一些 JavaScript 动画，它们将 CSS 类添加到元素中/从元素中删除，而 CSS3 动画用于旋转。我没有使用 Canvas 。

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

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

乍一看，Z 索引似乎在不可见元素上出现了问题。更改这些不会影响问题。删除整个文档中的所有绝对、相对、固定位置以及 float 元素不会影响问题。唯一有用的操作是删除所有 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”的曾曾曾祖先的 sibling 。

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

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

这对我来说进展非常缓慢，因为我没有 Mac——我只是在使用 Microsoft Expression Web 4 SuperPreview——但我的客户有一台 Mac 并且没有留下深刻印象。在此先感谢您的任何建议。

Answer 1

我刚刚在 Mac 版 Chrome 和 Mac 版 Firefox(版本分别为 22.0.1229.94 和 14.0.1)中打开该网站，除了一些间距差异(很小)外，它们看起来是一样的。我看到的唯一奇怪的事情是，如果您的窗口足够窄以保证(看似不必要的)水平滚动，则所有图形旁边都会显示浅蓝色背景。

到底缺少什么？