Mobile - Virtual keyboard overlap behaviour

[PiotrTecza]

Environment: iOS (Safari) and Android (Chrome) (probably every browser with the virtual keyboard)

Issue: When there is an input box inside TransformComponent and the input box gets focus, then the virtual keyboard is displayed. As long as the input box is not in the way of the virtual keyboard everything is ok. However if the keyboard would overlap the input box then the browser is scrolling the page content up so that there is enough space for the keyboard (expected behaviour). The problem is that when that happens the content is moved up way too much so there is a lot of space between the input box and the keyboard, and more importantly when the keyboard disappears it's not possible to scroll back to top of the page. I'm assuming the content of TransformComponent has negative coordinates thus is not visible.

Source code: https://github.com/PiotrTecza/react-zoom-pan-pinch-test Website URL: https://calm-sea-05be88010.1.azurestaticapps.net/

https://user-images.githubusercontent.com/11783299/154473983-796b8e68-5fe3-42a8-85b2-eaefc21e0fb5.mp4

[manuel-minniti]

I am experiencing the same issue.

Perhaps this might be of help to someone: <meta name="viewport" content="interactive-widget=overlays-content">

See https://developer.chrome.com/blog/viewport-resize-behavior/

[ducle-infotrack]

I have experiencing the same issue on android but the <meta name="viewport" content="interactive-widget=overlays-content">

Doesn't help 😥