iOSのSafariでwindow.innerHeightの値がページを開く度に変わる
解決したいこと
この問題がiPhone/Safariのバグなのか、PGバグなのかを切り分けたい。
発生している問題・エラー
サイト初期表示時のwindow.innerHeight
の値が安定しません。
具体的には、iPhone8使用時で553が返却される時と555が返却される時があります。
これが原因かはわかりませんが、top: 0;
指定のコンテンツと検索バーとの間に1pxほどの隙間が表示されてしまうことがあります。
余白表示時のwindow.innerHeight
は553
。
余白なしで正しく表示された場合のwindow.innerHeight
は555
。
余白ありで表示された後、スクロールをかけたりページ更新をすると正しい表示になり、window.innerHeight
の値も555
に変わります。
再現方法
- iPhone
- Safari (シングルタブ設定のみ)
他サイトで未確認ですが、管理しているWPサイト2つで同様の事象が確認できました。
URL直接入力でページを表示した場合は再現できません。
Google検索等で別サイトから遷移してきた時のみ再現します。
試したこと
top: 0;
がかかっている要素をtop: -10px;
などとしてみましたが、0地点より上には動きませんでした。
html側からは動かせない位置に余白があるのではと思っています…
確認していただきたいこと
window.innerHeightの値が違う = ブラウザの認識している画面の高さが違う、
ということだと思うので、ブラウザのバグを疑っているのですが…
この結論付けで良いのかどうか、PGに疑うべき点があるかどうかご教授願いたいです。