'PWA does not resize window when virtual keyboard is active on fullscreen display mode

I am developing a PWA, primarily targeting mobile users. The default behavior for the web, as far as I know it that, when the virtual keyboard is active, the window size adjusts accordingly. This works fine for mobile on the web and in standalone display mode. In fullscreen mode the window size does not change when the keyboard is active. That results in inputs beeing hidden behind the keyboard. Does anyone now why that is the case or if there is a hack to get around that? (Like getting the height of the keyboard manually, etc.) The issue only occurs on android chrome as far as I know, ios safari works as expected.

androidhtmlgoogle-chromeprogressive-web-appsvirtual-keyboard


Solution 1:[1]

This is a CSS issue... usually a result of static positioning and/or static height values. Try updating the style of the body tag; setting its position to relative.

Also, sometimes all it takes is updating the app-wrapper's height to something dynamic like 100% or 100vh.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Really Nice Code

Related Questions