iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ

iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。

いろいろ試しましたが、行き着いた回避策は2つ

  1. fixedを諦める
  2. overflow-scrolling: touch;の慣性スクロールを諦める

いずれかでした。

なぜこのようなことになったか、という余談ですが

まず、ヘッダとフッタを固定表示し、真ん中の領域をスクロールさせる設計のウェブサイトがありました。

そして、iOS Safariの仕様として
最後までスクロールし、さらにスクロールしようとした際には、バウンスが発動して
ページ全体が上方向に浮き上がり緩やかに元の位置に戻ってきます。
(反対方向のスクロールでも、もちろんバウンスしますよ!しますとも!)

こういうフッタ固定のコンテンツ、アプリならバウンスを切る設定ができるのですが
純粋にブラウザで見るウェブコンテンツでは、バウンスには干渉できないので甘んじて受けるしかない…
しかし、「フッタがちゃんと固定できていませんけど」とおっしゃるお客さんが多いんですよ。

そこでfixedです。

position: fixed; で配置されている要素は、バウンスが発動しても表示位置を固定できます
(バウンスを阻止しているわけではなく、バウンス中でも表示だけは固定できている状態ではないかと推測しています)
そうして、fixed要素を親として、固定ヘッダ+スクロールするコンテンツ+固定フッタが配置されることになったのです。

関連記事

Pocket