position
.parent {
position: relative;
width: 100vw;
height: 100vh;
}
.child {
position: absolute;
bottom: 50px;
}
のように、親要素を画面いっぱいに広げた状態で子要素にposition: absolute;を指定すると、
iOSで子要素がタブバーに被った、ということがありました。
(Androidではタブバーが画面上側にあるので問題なし)
それにより、
「iOSでは子要素とタブバーが重ならないように表示してほしい」
という指摘を受けたため、その解決方法を記載します。
解決方法
position:fixed;を使って、画面幅を基準に要素の位置を決定する。
親要素を画面いっぱいに広げる場合は、子要素にposition: fixed;を指定することで解決しました。
position: fixed;を指定すると、view port(ブラウザの表示領域)を基準に要素の位置を決められるようになります。
このview portにタブバー（ツールバー）は含まれないため、タブバーと被る事なく子要素を表示することができました。
簡単な話ではありましたが、実機での表示も意識した開発が必要ですね。ブラウザの検証機能でモバイル表示を確認できる機能がありますが、それだけではわからないことがたくさんあります。
（特にSafariは実機確認しないとわからないバグが多い笑）
また余談ですが、タブバーのURL部分の左隣にある「あ」から「ツールバーを非表示」を押せば、タブバーを含めたツールバーが非表示になるようです（知らなかった）。
参考：https://rishuntrading.co.jp/blog/programing/iphone_tabbar/