Question

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

单击按钮后，类将添加到包含元素#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/

将transition-delay属性的visibility更改为小于其他属性的延迟，可解决此问题。所以似乎如果转换被延迟，如果转换开始时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;
}

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

1 个答案: