Белая панель появляется при двойном тапе снизу в PWA в автономном режиме

Мы обнаружили поведение, которое, на мой взгляд, является ошибкой в ​​Safari. Установите PWA на iOS на главный экран, откройте приложение в автономном режиме и коснитесь любого ввода текста, закройте клавиатуру и дважды коснитесь свободного места (при увеличении масштаб уменьшается, затем снова дважды коснитесь), снизу появляется белый блок страницы. Вероятно, это вызвано тем, что «клавиатура» смещает содержимое, когда клавиатура активна. Я пробовал с помощью Angular и React создать пустой проект и добавить только ввод и некоторую окраску, чтобы блок был более заметным. Оба репозитория доступны на GitHub и развернуты в Firebase. Я пробовал с несколькими производственными PWA разных компаний, все приложения имели одинаковое (ошибочное) поведение. Я уже отчитался в Apple. Кто-нибудь нашел решение или подсказку, как предотвратить прокрутку?

Угловой
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

Действия по воспроизведению
- на iPhone iOS11.*, iOS12.*
- установите приложение PWA на главный экран добавить PWA на рабочий стол
- открыть приложение из дома - автономный режим
- коснуться ввода, чтобы открыть клавиатуру
- закрыть клавиатуру
- дважды коснуться любого свободного места

Поведение: белая панель прибывает из нижней части дисплея (вероятно, «пробел» для клавиатуры)
Ожидаемое поведение: масштабирование или ничего, в зависимости от метатегов.

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


person lenkavon    schedule 12.03.2019    source источник
comment
Также есть такая же проблема. У кого-нибудь есть решение этой проблемы?   -  person Emre Öztürk    schedule 26.04.2021


Ответы (1)


Сегодня это все еще ошибка в iOS13, но я нашел способ ее обойти.

Вы можете добавить пустой прослушиватель событий touchstart к родительскому элементу. В идеале вы выбираете элемент, который покрывает всю область просмотра, а не document.body. Слушатель событий предотвратит запуск невидимой клавиатуры при двойном касании.

Используя ваш пример angular, проблема устраняется следующим образом:

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