iOSでoverflow:scrollとoverflow-scrolling:touchを使って、header等をfixedにした時にずれる時の対処法

どうも、webデザイナーのレーウィンです。
今回はちょっと限定的な不具合について。

画面の大部分を埋める形でoverflow-y:scroll;のブロックを設置。その中にコンテンツを入れる仕様にしたことがあった。
そのブロックには慣性スクロールを入れたかったので「-webkit-overflow-scrolling: touch;」を追記。
headerは仕様の都合でfixedにしてtop:0;left:0;に配置。

一見普通だし、実際PCやchromeの検証ツールでは問題がなかった。
・・・が、iphoneの実機で見てみると、スクロールが端に到達した時のバウンスでバグる。表示上でずれてしまう。ボタンの実際押せる位置とかはずれないのだけど、画面の見た目ではずれる。不思議。
10分ほど考えて試しに

html {
    transform: translate3d(0, 0, 0);
}

を入れてみたらいけた。
iphoneってfixed関係で不具合が多いけど、大体は上記でいける。

短いけどここまで。では!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。