White panel arrives on double tap from bottom in PWA in standalone mode

Question

We have found a behaviour that in my opinion is a bug in Safari. Install the PWA on iOS to Home Screen, open app in standalone mode and tap to any text input, close the keyboard and double-tap on free space (it zooms out if zoomed, then double tap again), the white block appears from bottom of the page. Probably it is caused by the “keyboard” to offset the content when keyboard is active. I have tried with Angular and with React to create empty project and adding just an input and some coloring so the block is more visible. Both repositories are available on GitHub and deployed to Firebase. I have tried with a few production PWA of different companies, all apps had the same (buggy) behavior. I have reported to Apple already. Does anybody found a solution or tip how to prevent the scrolling?

Angular
https://github.com/lenkavon/pwa-double-tap-bug-ng
https://pwa-double-tap-bug-ng.firebaseapp.com

React
https://github.com/lenkavon/pwa-react-double-tap
https://pwa-double-tap-bug.firebaseapp.com

Steps to reproduce
- on iPhone iOS11.*, iOS12.*
- install the PWA app to homescreen add PWA to homescreen
- open the app from home - standalone mode
- tap the input to open the keyboard
- close keyboard
- double tap on any free space

Behavior: white panel arrives from bottom of the display (probably the 'space' for keyboard)
Expected behavior: zoom or nothing depending on meta tags.

https://i.makeagif.com/media/3-12-2019/WQwlCk.gif

Answer 1

For anyone who is having this issue, this is a wacky yet simple workaround:

document.addEventListener("scroll", (e) => {
if (document.documentElement.scrollTop > 1) {
  document.documentElement.scrollTop = 100;
}
});

Apple developers should be ashamed really