0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

一部iOSでoverflow-y: scrollが効かない

Last updated at Posted at 2023-01-28

ム!この画面、スクロールが効いてないぞ

sample.css
.scroll {
    width: 100%;
    overflow-y: scroll;
}

自分はiMac Proを使っていますが、Windowsで実装した作業者の画面を見るとスクロールしている。
何なら自サブ機のMacbookは普通にスクロールしとるやんけ!なんなんだこれは

どうやら一部iOSで起こる固有の現象っぽい

iOS及びSafariでこの手の現象が度々出るっぽい。

overflow-y: scroll;してるブロックにtransform: translateZ(0); を指定したらRetinaディスプレイでも無事スクロールできるようになりました。

この記事を参考にtransform: translateZ(0);を追加しましたが、変わらない…
他にも、height: 100%;追加で行けたとか色々出てきましたが変わらず。

解決

sample.css
.scroll {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

height: 100vh;を追加で解決しました。
100vhだと突き抜ける場合はお好みで数字を指定するスタイル。

他クラスを見てくれないのか何なのか、overflow-yを入れているクラス内で宣言しないとheightを認識してくれないっぽい?
100%だと動かないけど90%を指定すると若干スクロールしたりとかしたので謎すぎる…
あとこの方法だとデザイン崩れやすくなったりするので、もう少しいい解決方法があればコメントで教えていただけるとありがたいです。

余談

overflow: hidden;も効かなくてwidth: 100vw; height: 100vh;を指定しました。
とりあえずMacでoverflowが効かなかったらwidthとheightを指定しよう(教訓)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?