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', () => {
  document.body.style.overflow = 'scroll';
  window.scrollTo(0, 0);
  document.body.style.overflow = 'hidden';
});

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

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:

After switching to landscape and then portrait again: