アイフォンSEは「position:fixed」した要素のz-indexが効かない
cssを見ていると時々「-webkit-overflow-scrolling : touch」とかいうよくわからないのがありますよね。とりあえず入れちゃえ!でコピペしている方も多いかもです。
てことでここではそもそも「-webkit-overflow-scrolling : touch」とは?というのと実は今はいらないよ!というのを紹介したい。
「-webkit-overflow-scrolling : touch」は不要!
表のスクロールやメニュー部分のスクロール、そんなスクロール部分に時々出てきてた「-webkit-overflow-scrolling : touch」ですが実はもう不要になりました。この一行まるまる消してもらってOK。
いらない処理、不要な処理はどんどんcssから消した方が後から見やすくなっておすすめです。
「-webkit-overflow-scrolling : touch」とは?
はい、んじゃ「-webkit-overflow-scrolling : touch」とは何なの?をサクッと。
「-webkit-overflow-scrolling : touch」というのはアイフォンに向けた命令でした。
パソコンもアンドロイドスマホも全く関係なくアイフォンにだけ向けた命令。
アイフォンの表スクロールやメニュースクロール、こういったウェブページ本体じゃない所のスクロールがカクカクしてダサい!というのを解決してくれていたのが「-webkit-overflow-scrolling : touch」になります。
これをスクロールするパーツに設定することでカクカクだったスクロールがスムーズにぬるぬる動くようになってた、というわけです。
ただアイフォン自体がカクカクはだせーからもう標準でぬるぬるスクロールにしたわ!と改善しちゃったので、冒頭の「-webkit-overflow-scrolling : touch」不要だよ!の話につながるのですね。
まとめ
「-webkit-overflow-scrolling : touch」とは?から、実はもういらないんだよ、というのを紹介しました。
あってもいいですが逆に「-webkit-overflow-scrolling : touch」に由来するバグがある?らしいのでもう全部きれいに取っ払っちゃったほうがいいと思います。
それでは!