html - Mac Safari 5.1 中的 CSS 转换延迟错误——有什么解决方法吗？

Question

我遇到了一个非常烦人的错误，它出现在 Mac 上的 Safari 5.1 中。由于此浏览器仍然很常见，因此我需要支持它。

JSFiddle:http://jsfiddle.net/QCvZt/2/

点击一个按钮，一个类被添加到包含元素#chance .样式表具有导致点击元素的规则 #chance-loose-card立即使用转换动画，然后在延迟后，#chance-card动画。

它们淡入淡出 opacity , 然后我翻转 visibility当它们完全透明时隐藏起来，因为在整个站点中，它们可能会超出事物的顶部并捕获用于下面元素的点击。

这在 Firefox 和 Chrome(以及 Safari 6)中运行良好。

但在 Mac 上的 Safari 5.1 中，第一个动画按预期发生，但随后 #chance-card没有出现。直到我将鼠标悬停在 #carousel 上#chance-card 元素(大概是因为它触发了另一个转换——一个按钮淡入)出现了。

现在，假设它与触发的另一个转换有关，我尝试通过 Javascript 强制转换每秒发生一次 setInterval在元素上翻转类，使其来回转换。但这并没有解冻过渡并使#chance-card出现。转换 transform: translate而不是 margin-left在 #chance-card 上也没有帮助。

如 JSFiddle 中所述，减少 transition-delay在 #chance-card确实使错误消失了，但对于我的用例，这不是一个可接受的解决方案。

我想知道是否有人可以建议任何解决方法？我在搜索中没有找到任何听起来相似的内容。

Answer 1

我找到了解决方案!

http://jsfiddle.net/QCvZt/4/

将 visibility 属性的 transition-delay 更改为刚好小于其他属性的延迟可解决此问题。所以看起来如果转换被延迟，如果 visibility 在转换开始时被 hidden (即使它会在同一时刻翻转为可见)，过渡直到以某种方式触发才开始(就像在这种情况下，鼠标悬停在灰色区域上，尽管我不确切知道机制)。在其他转换即将开始之前将 visibility 翻转为 visible 会使问题消失。

在这种情况下，我更改了这个(省略了供应商前缀)

#chance.state-chancecard #chance-card {
    transition: transform 0.5s, opacity 0.1s, visibility 0s;
    transition-delay: 0.5s, 0.5s, 0.5s;
    transition-timing-function: ease-out;
    transform: none;
    opacity: 1;
    visibility: visible;
}

对此

#chance.state-chancecard #chance-card {
    transition: transform 0.5s, opacity 0.1s, visibility 0s;
    transition-delay: 0.5s, 0.5s, 0.49s; /* flip visibility just before other transitions are to start */
    transition-timing-function: ease-out;
    transform: none;
    opacity: 1;
    visibility: visible;
}