Solution 1 :

Just run into the same issue.
If I click the white bar, the toolbar would recover,
but all dom click event are misplaced.

Here’s my walkaround:

window.addEventListener('resize', () => { = 'scroll';
  window.scrollTo(0, 0); = 'hidden';

This won’t fix the white bar, but may fix the click event issue.

Problem :

I’m seeing some strange behaviour with iOS mobile safari on 13.3.

I have a website that is for the majority, a single page application. Therefore, I’m keeping it’s height/width at 100% and adjusting content to fit. Everything is working fine on other browsers/devices but iOS Safari is showing an issue when switching from portrait, to landscape, and then back to portrait.

I believe the issue is to do with the navigation bar/toolbar and how when it hides, the viewport increases. Testing on an iPhone 8 Plus, when I load the page and the bars are showing, I see a height of 622px. When I rotate to landscape, a height of 414px. When I rotate back to portrait, the bars are hidden (or reduced for navigation bar) but the height is still 622px. This leaves a large gap at the bottom of the page. window.innerHeight believes it’s 622px. If I open and close the navigation bar then the view adjusts to how I’d expect it; height 697px.

If I use 100vh instead of 100%, the page extends behind the bars.

Any tips or explanations would be great!

On Initial Load:

On initial load

After switching to landscape and then portrait again:

After switching to landscape and then portrait again


Comment posted by Indiana Kernick

I’ve been battling this (and other issues) for several days now and from what I’ve found, it seems like it’s either intended behaviour or a wont-fix for whatever reason. A similar issue is that in landscape mode, the bottom few pixels don’t respond to touch events. The temptation to make an iOS app is growing by the minute. Apple has designed iOS Safari to work well for simple websites but for anything app-like, Apple wants us to make an iOS app. It’s just so frustrating.