2012年12月14日

MacでCSS3アニメーションで画面がチカチカする件

CSS3の-webkit-keyframesを-webkit-transformを利用してアニメーションを指定しているとどうやMacのSafariやGoogle Chromeで画面がチカチカしてしまう。

どうもclassの抜き差しでグラフィックアクセラレータが切り替わるのが問題っぽい。以下のように隠し要素を無限にアニメーションしておけばチカチカ問題も解決です。

#hack{
width:0;
height:0;
-webkit-animation:hack 2000ms infinite;
}
@-webkit-keyframes hack {
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}


posted by ねこまんま at 19:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。