position:fixed;にした要素の子にoverflow-scrolling: touch;を設定するとフリーズすることがある


ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。

そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク

そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。

原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/

諦めるしか無いのか・・・

と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。

たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。

,

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です