3
1

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.

はじめての記事投稿

position: stickyで固定した要素がスマホでズレる問題

Last updated at Posted at 2023-07-06

はじめに

要素をposition: stickybottom: 0を指定して下部に固定した際、実機のスマホだとアドレスバーの有無によって位置がズレてしまう問題が発生しました。

環境

機種:pixel6a
os:Andorid13
ブラウザ:chrome114

解決方法

コードに以下の要素をどこかに追加することでズレが解消されました。一体なぜなんだろう。。。

<div style="position: fixed"><div/>

こちらの海外ブログを参考にさせてもらいました。
おそらくズレが発生してしまうのはブラウザのバグだと思うのですが、この現象に関して何か知っている方がいましたらコメント等で教えていただけると助かります。

3
1
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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?