JavaScript(jQuery等）でスライドショー等の動きのある表現を行なったとき、アニメーションに連動して要素の一部分、もしくは画面全体かけて文字等がちらつく（フリッカー）現象が発生することがあります。
挙動自体に問題はなく発生範囲が限定的であっても、一度目にすると看過するわけにはいかないものです。
今回はこの問題を解決する方法をメモしておきたいと思います。
問題発生の原因によっては、今回紹介するパターンでは解決できない場合もありますが、是非一度お試しください。
INDEX
jQuery や JavaScript のスライドショー実行時のチラつきの対処方法
中見出し
まず、原因ですが、チラつきの現象がおこる対象はスタイルに position: relative が適用されている可能性が非常に高いです。
この場合であれば、以下の方法にてチラつきが解決できるかと思います。
いくつか解決パターンがあるので、上から順番に試していってみてください。
- スライドショー等のアニメーションが実行されている要素のレイヤーを最前面にする
- 要素の position に relative が適用されている場合は z-index:1; （もしくは1以上の数値）を追加します。
- [code]
.slide {
position: relative;
…
…
z-index: 1;
}
[/code] - スタイルシートに１行加える
- メインのスタイルシートの先頭に以下の１行を追加して下さい。{}は不必要です。
- [code]
* -webkit-transform-style: preserve-3d;
[/code] - 問題が発生する要素に position: relative を適用しない
- チラつきの対象に position: relative が意味もなく適用されている場合は、このスタイルを削除することで解決します。以下の例ではコメントアウトで対処しています。
- [code]
.sample {
/* position: relative; */
margin: 0;
padding: 1em;
}
[/code]
まとめ
この他にも、ネガティブマージンを指定している場合にも似たような問題が発生するときがあるみたいです。CSS の継承や擬似要素、擬似クラス等に関してもまだまだ勉強が必要ですね。
CSS に関してはまた別の機会に掘り下げてみようと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
