iOS Safariで、絶対配置指定している要素内でスクロールができないことがある

スマートフォン用にメニューを作り、その中でスクロールをさせたい場合などpositionプロパティとoverflowプロパティを組み合わせて使うことがあると思いますが、iOSのSafariではその組み合わせの中で、次の条件を満たすとスクロールが効かなくなることがあります。

• positionプロパティにabsoluteまたはfixedが指定されている
• heightプロパティで固定幅指定されている（相対値、絶対値どちらとも）
• overflowプロパティでスクロール指定されている
• -webkit-overflow-scrollingプロパティにtouchが指定されている
• 同じ要素にpositionプロパティとoverflowプロパティを指定している

回避方法としては次の方法があります。

• -webkit-overflow-scrollingプロパティをautoに指定を変更する
• positionプロパティとoverflowプロパティを別の要素に指定する

-webkit-overflow-scrollingプロパティをautoに指定を変更する

-webkit-overflow-scrollingプロパティをautoに指定を変更することで回避できる場合があります。

当然ながら指定をautoにするとスムーズにスクロールができなくなります。

positionプロパティとoverflowプロパティを別の要素に指定する

positionプロパティとoverflowプロパティを別の要素に指定することで回避できる場合があります。