Question

我有一个页面，它使用了许多简单的动画，包括一些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-供应商前缀），它会导致一个大的形式消失，这是＆＃34; #element。＆＃34;的伟大祖先的兄弟。

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

所有动画都包含在animations.css中，并且所有JavaScript动画都是一般的.js。

这对我来说非常缓慢，因为我没有Mac - 我只是使用Microsoft Expression Web 4 SuperPreview - 但我的客户端有Mac并且没有留下深刻印象。提前感谢任何建议。

Answer 1

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

究竟缺少什么？

Answer 2

在大多数情况下，麻烦来自Microsoft Expression Web 4 SuperPreview中的错误及其Mac / Safari 5.0.3仿真器服务。当任何-webkit-供应商前缀用于CSS3动画时，它会使看似与动画无关的元素表现得好像它们具有可见性：隐藏。

我的客户使用实际的Mac与Chrome首次报告的消失元素的类似问题似乎来自与@ font-face一起使用的糟糕的.svg字体转换。虽然svg字体是在Mac / Webkit上渲染的，但它似乎正在破坏使用它的元素以及父元素的样式。当我使用不同的转换实用程序再次将字体转换为svg时，问题得以解决。怪异。

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

2 个答案: