フロントエンド開発Blog

オレには鈍器がある

CSS3 , Deferred , animation , jquery , promise , resolve , then

偶然見つけたGoogleChromeのバグ?です。
以下すべての状況が整うと再現します。

・CSS3アニメーションを使用
・jQueryのDeferredを使ってアニメーションを順列実行
・thenの移行タイミングはwebkitAnimationEnd
・該当するCSS3アニメーション以外に、repaintingが発生する要素が存在しない
(つまり、setIntervalやらanimate()やらでアニメーション処理させている要素がない)

これらの条件をひとつでも崩せば解決しました。
もっともカンタンなのは「目立たない、適当なアニメーションをさせておく」です。

ちなみに20150913現在、GoogleChromeCanaryでは解決されていましたので
来年あたりにはこのナレッジは陳腐化しているかと。。。

※jsdo.itでこの問題を再現させるには「smartphone」バージョンで再生してください。
 jsdo.it本体のなんらかのJSと干渉して問題が発生しないようなので・・

あ、あと連打をカンタンに実行するプログラムは「クリック 連打」みたいな単語でぐぐると色々でてきますのでそちらも調べてみて導入すると検証が楽です。

ページトップへ

関連ページ

ページトップへ