はじめに

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

環境

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

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

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

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