3

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

lenkavon
  • 41
  • 5
  • Setting a [theme color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) is a slight improvement: you get an appropriately colored panel, instead of a white panel. – Josh Kelley Feb 03 '23 at 19:21

2 Answers2

4

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

TheBetterHalfOfJackpot
  • 41
  • 2
  • When I tested it, this works, although it introduces other behavior that may be undesirable: instead of the smooth "rubber-band" animation that mobile browsers give when you overscroll, it does a jittery bouncing at the edge of the normal scroll range. – Josh Kelley Feb 03 '23 at 19:22
-1

This is still a bug today in iOS13 but I have found a work around.

You can add an empty touchstart event listener to a parent element. Ideally you select an element that covers the entire viewport that isn't document.body. The event listener will prevent the double-tap from triggering the invisible keyboard.

Using your angular example, the problem is fixed with the following:

document.querySelector('app-root').addEventListener('touchstart', (e) => {});
Kris Z
  • 1