Mac Safari 5.1 中的 CSS 转换延迟错误 - 任何解决方法？答案

【问题标题】：CSS transition-delay bug in Mac Safari 5.1 -- any workarounds?Mac Safari 5.1 中的 CSS 转换延迟错误 - 任何解决方法？
【发布时间】：2013-09-16 08:07:25
【问题描述】：

我遇到了一个非常烦人的错误，它出现在 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 出现。在#chance-card 上转换transform: translate 而不是margin-left 也无济于事。

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

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：