0

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 に記載されているように、on を減らすとtransition-delayバグ#chance-cardはなくなりますが、私の使用例では、これは受け入れられる解決策ではありません。

誰かが回避策を提案できるのだろうか？検索で似たようなものは見つかりませんでした。

4

1 に答える 1

0

解決策を見つけました！

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;
}
于 2013-09-12T18:49:11.317 に答える