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

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

JSFiddle：

单击按钮后，类将添加到包含元素

#chance

。样式表中有一些规则，这些规则会使单击的元素

#chance lose card

立即通过转换动画化，然后在延迟后，

#chance card

在中动画化

它们以

不透明度

淡出和淡入，当它们完全透明时，我将

可见性

翻转为隐藏，因为在整个站点中，它们可能会超越事物的顶部，并捕获针对下面元素的点击

这在Firefox和Chrome（以及Safari 6）中非常有效

但在Mac上的Safari 5.1中，第一个动画如预期的那样出现，但随后没有出现机会卡。直到我将鼠标悬停在

#carousel

元素上（可能是因为它触发了另一个转换——一个按钮淡入），才出现了

#chance card

现在，假设这与触发另一个转换有关，我尝试通过Javascript

setInterval

翻转元素上的类，使其来回传输，每秒强制进行一次转换。但这并没有解冻转换并使

#机会卡

出现。转换

转换：转换
而不是
#chance card
上的
左边距
，也没有帮助

正如JSFIDLE中所指出的，减少
#chance card
上的
转换延迟确实可以消除错误，但对于我的用例来说，这不是一个可接受的解决方案

我想知道是否有人能提出解决办法？在我的搜索中，我没有找到任何听起来相似的东西。
我找到了一个解决方案


将
可见性
属性的
转换延迟
更改为刚好小于其他属性的延迟可以解决此问题。因此，如果转换延迟，如果在转换开始时
可见性
是
隐藏的
（即使它将在同一时刻翻转为可见），转换直到以某种方式触发才开始（就像在这种情况下，鼠标移过灰色区域，尽管我不知道确切的机制）。在其他转换即将开始之前，将
可见性
翻转到
可见性
，会使问题消失

在本例中，我更改了这一点（省略了供应商前缀）

对此

#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;
}

#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;
}