Search code examples
javascriptcssiossafari

Safari pull-to-reload creates different innerHeight than normal reload


I'm working on a page where a full height banner is displayed on page load, this is done by setting the height of the image container in JS when page is loaded, resized, or the orientation is changed. This works well, however I've come across an issue in Safari on iOS where on initial page load, or by pressing the refresh icon, the height calculates correctly, but when using pull-to-reload the window.innerheight calculates about 60 pixels less. I know there are differences in how Safari calculates innerHeight based on if the toolbar is expanded, but this seems to be a different issue because the height is only wrong when pull-to-reload is used. Any ideas?


Solution

  • I was able to fix this by using the new svh unit instead of window.innerheight