CSS3动画让看似无关的元素在Mac /消失的Webkit [英] CSS3 animations make seemingly unrelated elements disappear in Mac/Webkit

问题描述

我有一个使用了一些简单的动​​画，包括一些JavaScript动画，添加/删除CSS类与CSS3动画为旋转元素的网页。我不使用画布。

I have a page that uses a number of simple animations, including some JavaScript animations that add/remove CSS classes to elements with CSS3 animations for rotations. I am not using canvas.

在PC上，页面看起来在Chrome / Safari浏览器，火狐和IE很大，但在Mac上，一些要素都完全在页面上时，它在WebKit的（铬，和Safari 5.0.3）被认为失踪。它看起来罚款的Firefox在Mac上。缺少的元素没有应用任何动画 - 我看不出他们与动画之间的任何连接。

On the PC, the page looks great in Chrome/Safari, Firefox, and IE, but on Macs, a number of elements are completely missing on the page when it is viewed in WebKit (Chrome, and Safari 5.0.3). It looks fine in Firefox on Mac. The missing elements don't have any animations applied to them -- I don't see any connection between them and the animations.

页面验证，CSS的几乎除了供应商扩展在我clearfix变焦性能验证。禁用所有JavaScript的网页上没有任何改变。缺少的元素是源，他们只是没有在页面上可见。

The page validates, the CSS nearly validates except for the vendor extensions and the zoom property in my clearfix. Disabling all of the JavaScript on the page doesn't change anything. The missing elements are in the source, they are just not visible on the page.

乍一看，它看起来像Z-指标已经得到的不可见元素扭曲。改变这些不影响虽然这个问题。除去所有的绝对的，相对的，固定位置的，以及浮动元素在整个文档中不影响的问题。即做任何事情的唯一操作，是消除所有的Webkit动画。结果
而当我申请的所有动画，几乎所有在页面上消失！

At first glance, it looks like the Z-indexes have gotten screwy on the invisible elements. Changing these doesn't affect the problem though. Removing all of the absolute, relative, fixed positions, as well as floated elements in the entire document doesn't affect the problem. The only action that does anything, is removing all of the Webkit animations.
And when I apply all of the animations, nearly everything on the page disappears!

下面是我的动画的一个例子 - 简单的东西：

Here is an example of one of my animations -- simple stuff:

@-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%;
}

即使动画不叫，只是关键帧的presence导致页面打破。
如果我使用特别是这个动画（只是-webkit-厂商preFIX），这将导致大量的形式消失是伟大的，伟大的祖先的兄弟#element。

Even if the animation is not called, simply the presence of the keyframes causes the page to break. If I use this animation in particular (just the -webkit- vendor prefix), it causes a large form to vanish that is a sibling of the great-great ancestor of "#element."

下面是我工作的网页的链接。我一点关系都没有的设计：
http://goo.gl/6XXcV

Here is a link to the page I'm working on. I had nothing to do with the design: http://goo.gl/6XXcV

所有的动画都包含在animations.css和所有的JavaScript动画都在general.js。

All of the animations are contained in animations.css and all the JavaScript animations are in general.js.

本已很慢，去为我，因为我没有一台Mac - 我只是用微软前pression网站4超级preVIEW - 但我的客户有一个Mac和是不是IM pressed。感谢您事先的任何意见。

This has been very slow-going for me since I don't have a Mac -- I'm just using Microsoft Expression Web 4 SuperPreview -- but my client has a Mac and is not impressed. Thanks in advance for any advice.

推荐答案

在大多数情况下，麻烦竟然是从Microsoft防爆pression网站4超级preVIEW与他们的Mac / Safari浏览器5.0的bug 0.3模拟器服务。当任何-webkit-厂商prefixes用于CSS3动画，它会导致要素看似无关的动画表现得好像他们有visibility：hidden的。

For the most part, the trouble turned out to be from bugs in Microsoft Expression Web 4 SuperPreview with their Mac/Safari 5.0.3 emulator service. When any -webkit- vendor prefixes are used for CSS3 animations, it causes elements seemingly unrelated to the animations to behave as if they have visibility:hidden.

与先使用Chrome浏览器实际的Mac我的客户报告的消失元素类似的问题似乎是从正在使用@字体面用坏.SVG字体转换。虽然SVG字体渲染是在Mac / Webkit的，它出现在它被使用，以及父元素元素被摧毁的风格。当我转换的字体一次使用不同的转化工具SVG，问题解决了。奇怪的。

The similar problems with the disappearing elements first reported by my client using an actual Mac with Chrome seem to be from a bad .svg font conversion that was being used with @font-face. Although the svg font was rendering on Mac/Webkit, it appeared to be destroying styles on elements in which it was used as well as parent elements. When I converted the font once more to svg using a different conversion utility, the problem resolved. Weird.

这篇关于CSS3动画让看似无关的元素在Mac /消失的Webkit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！