現象
Bootstrapのカルーセルを使ってスライドショーを作成
スライドが切り替わるタイミングでaタグの文字列(リンク)が光って見える
よくよく見ると一瞬だけシャドウが付いたように文字がチラついていた
原因
Bootstrapの記事で同じような現象が中々見つけられなかった
ソースコード見たりして原因を探していたらCSSのTransformのバグっぽかった
CSS Transformsで画面がちらつくときの対処法 - ゆめいろデザイン : フリーランス UIデザイナー Webデザイナー [東京]
transformで画面がちらつく時 - Qiita
「-webkit-backface-visibility:hidden;
」と「backface-visibility:hidden;
」を指定
と記事に書いてあったのでやってみようとすると既にBootstrapの方で記述してくれている模様
チラついている部分のa要素に付けてみたりなどしてみても、結局変わらず・・・
ちょっと現象は違うけど、似たような状況でBodyに-webkit-font-smoothing: antialiased;
を付けてみるといいよという記事を発見
Safariでtransitionをかけると、文字が一瞬細くなるバグの解決法 - Qiita
やってみたけど、やはり変わらず・・・
とりあえず同じようにBodyにbackface-visibility付けてみるかーと思ったらチラつかなくなりました
ナンデ
対策
body {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
カルーセルは他のサイトでも使ってましたが、今回初めて発症しました
再現性がよく分からないですが、発症してしまったら試してみてください