position:fixedの要素をスクロールした時のガタツキを最大限防止する方法

position:fixedの要素をスクロールした時のガタツキを最大限防止する方法

みなさんこんにちは、ゆうやです!

L’Arc~en~Cielの公式Youtubeチャンネルが開設された今日このごろ、いかがお過ごしでしょうか。

HONEY」「花葬」「浸食 -lose control-」の3曲のMVが現在チャンネルで公開されているようです!

ラルクファンの方にはたまりませんね(^o^)

ちなみに僕が好きなのは機動戦士ガンダムOOの第1期OPだった「DAYBREAK’S BELL」です!


さて本記事では、

「position:fixedでページ最下部に固定したフッターメニューをスクロールする時にガタついたりチカチカして困ってます!」

という方に向けて対処法を紹介します!

position:fixedの要素をスクロールした時のガタツキを最大限防止する方法

おそらくみなさん初めてお目にかかると思われる命令を該当箇所に指定してあげましょう!

以下の2行になります(^o^)

index.css
-webkit-backface-visibility:hidden;
 backface-visibility:hidden;

backface-visibility」プロパティさんです!

呼び方はそのまま、「バックフェイス ビジビリティ」!

これでガタツキを最大限防止することができますのでぜひお試しあれ(^o^)

注意
筆者の試した環境では完璧にガタツキを抑えることは叶いませんでしたが、指定する前よりも圧倒的にガタつかなくなりました。

参考記事

参考 CSSでfixedなどを使った時、ページスクロールがガタガタするときの対応Qiita

まとめ

いかがでしたでしょうか。

スマホでスクロールしたときにガタツキがあるとユーザーにストレスを与えかねないので要注意ですね!

最後までご高覧いただきありがとうございます!