【CSS】iOS13, Safari13から指定なしで慣性スクロールできるようになりました。


背景

iPhoneでモーダルを表示するときなど、デフォルトで慣性スクロールしてくれないので-webkit-overflow-scrolling: touchを指定して、慣性スクロールを実現させているページがありました。
ですが、fixed+慣性スクロールの掛け合わせだと、動きが止まるときがあったので指定を外しました。
そしたらoverflow-scrollingの指定がないのにiPhoneでも慣性スクロールになっている?と思ったので、検証してみます。

検証用

See the Pen menu scroll test by かぶきち (@cubkich) on CodePen.

端末・バージョン別

iPhone7 iOS 13.1.2

私の持っている端末では、慣性スクロールが確認出来ました。

iPhone6 iOS 12.3.1

会社にある端末では、慣性スクロールの確認は出来ませんでした。

iPhone10s iOS ??.?.?

先輩の端末で見てみたら、慣性スクロールしていませんでした。

考察

もしかしたらiOS13からデフォで慣性スクロールしてくれるのかもしれない。
ただ、まだシェアがそこまで広がっていないと思うので、慣性スクロールできないことを前提に対応するべき。
かなぁ。

お使いのiPhoneでは慣性してますか?

追記 (2019/12/11)

@spaceonly さんより、以下の情報をいただきました。

https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682
にて、Appleが公式に

Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set -webkit-overflow-scrolling: touch.」

(雑訳: 全てのフレームや overflow:scroll な要素に慣性スクロールのサポートを加えたことで、 -webkit-overflow-scrolling: touch を指定する必要が無くなりました )

と書いているので、確実のようです。

公式に発表されているようなので、安心して慣性スクロールができるようになったようです。

Safari 13 ships with iOS 13 and macOS 10.15. It’s also available for macOS 10.14.5 and 10.13.6.

(Google翻訳: Safari 13にはiOS 13とmacOS 10.15が付属しています。 macOS 10.14.5および10.13.6でも利用可能です。)

対象はSafari13~のようなので、旧バージョンの対応をしつつ、シェア状況をみて記述を省略、みたいにすると良さそうですね。