Issue: window.innerHeight is incorrect in Safari iPhone/iPad

Question

Created Aug ’23

Replies 1

Boosts 0

Views 1.3k

Participants 2

I'm working on an .html file. On Safari iOS/iPad, when testing on my local web server I get correct values for window.innerHeight. However when uploading to a dev/prod environment innerHeight is incorrect (so the elements in the page do not fit the screen).

Testing on ipad air 3rd gen, IpadOS 16.5.1 I get these values for window.innerHeight :

local server, navigation bar only (landscape): 764 => correct
local server, navigation bar and tab bar (landscape): 731=> correct
dev/prod environment, navigation bar only (landscape): 795 => incorrect
dev/prod environment, navigation bar and tab bar (landscape): 795 => incorrect

I have a similar issue when testing on portrait. InnerHeight is bigger than it should be and doesn't change when the tab bar is open. QA team also tested on Iphones and gets the same issue.

Tried alternatives (visualViewport.height, 100vh, documentElement.clientHeight...they all are incorrect on a real environment)

Boost

Answer 1

Rage6 OP

Mar ’24

I experienced a similar problem, so my solution may help you. In short, it has to do with the URL bar built into Mac mobile device browsers. You can read a better description at this person's page (https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d). In short, this "feature" built into Mac devices is a major pain to developers since it dynamically changes the bar's height whenever someone scrolls up and down. I found this the most useful fix, as long as you are trained in JavaScript or CSS: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/.

0