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
はなくなりますが、私の使用例では、これは受け入れられる解決策ではありません。
誰かが回避策を提案できるのだろうか?検索で似たようなものは見つかりませんでした。