0

I Have a PWA (also TWA) that is used as full screen to get the most space out of the device (used in landscape), I can't 100% reproduce the bug, but sometimes when i press the inputs and keyboard shows up, whenever i close the keyboard, the viewport doesn't get back to the original size but gets stuck, as if the keyboard was still open. To fix the issue you have to exit the app and open again, it's very annoying.

EDIT: i think i found a way to reproduce the bug (only happens in chrome)

  1. click on a input element which causes keyboard to open
  2. exit the app (not closing, just to the home)
  3. go back to the app (if the keyboard is still open, close it)
  4. click again an input
  5. scroll any scrollable element
  6. close the keyboard (or unfocus the current element)

I connected my phone to debug and i tested out some ways to fix the issue, i set the HTML and body elements to have the same pixel size as the screen, the element itself gets the correct size but the actual UI doesn't change.

PWA link: https://specy.github.io/genshinMusic/#/

TWA link: https://play.google.com/store/apps/details?id=genshinmusic.specy.twa

Repo: https://github.com/Specy/genshin-music

Video showing the bug enter image description here

Specy
  • 189
  • 2
  • 13
  • I am having similar issue, viewport height changes with keyboard, but sometimes does not return to normal when keyboard is dismissed. Size gets re-calculated if I touch screen again or scroll it. – diynevala May 20 '22 at 09:09
  • I didn't manage to fix the issue, it still happens sometimes, I didn't file a bug report to chrome but you could try – Specy May 20 '22 at 09:10
  • 1
    I managed to fix it with `if ('virtualKeyboard' in navigator) { navigator.virtualKeyboard.overlaysContent = true; }`, it makes the keyboard just hover **over** the html document. – diynevala May 20 '22 at 11:57
  • Also, I DO have to manage the view somehow, there is stuff that gets left under the keyboard, which is not fun. – diynevala May 20 '22 at 12:00
  • @diynevala oh wow I went through the virtual keyboard API but didn't notice that one at the time, the installed pwa in full screen should already default the behaviour to that one of hiding the element, so it's not that big of a deal. How did you manage making the element get in view? – Specy May 20 '22 at 12:15
  • just add lots of padding when keyboard is visible. – diynevala May 20 '22 at 12:19
  • @diynevala huuuh that sounds like a bad idea, I suggest you use either scrollIntoView method, or change the scroll top property of the parent – Specy May 20 '22 at 12:22
  • Yes, I need to scroll stuff into view certainly, but there's no room to scroll if I don't add padding that goes underneath the floating keyboard. – diynevala May 23 '22 at 10:25

0 Answers0