1

我有一个使用许多简单动画的页面，包括一些 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，并没有留下深刻的印象。提前感谢您的任何建议。

4

2 回答 2

0

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

究竟缺少什么？

于 2012-10-20T05:55:58.527 回答
0

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

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

于 2012-10-22T06:29:39.530 回答