MiniApp, virtual keyboard overlaps the content and shifts window improperly

[gurobokum]

Checklist

• [x] I am reporting an issue in existing functionality that does not work as intended
• [x] I've searched for existing GitHub issues Similar issue https://github.com/TelegramMessenger/Telegram-iOS/issues/1298

Description

I have an issue in MiniApp that when I focus any element that supports input, a virtual keyboard appears and the content of the page shifts improperly (randomly, sometimes it's overlapped, sometimes shifted to the top where it stacks when the keyboard closes) It leads that the user couldn't input data and the layout of the page becomes broken

TLDR; more details 🐞

MiniApp example page (jsx)

```html export default function HomePage() { return (

Block #1

Block #2

Block #3

Block #4

Block #5

); } ```

1. iOS client I use doesn't respect [viewport::interactive_widget](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#the_effect_of_interactive_ui_widgets) option, and looks like behaves as `interactive_widget=overlay_content`. It leads that inputs located at the bottom are overlapped by the keyboard and user doesn't see what he enters. It happens randomly with the input fields, but if you have `position:fixed` elements at the bottom they are overlapped. At the same time on android fixed elements moved with the viewport on top of the keybord _check that I focused `Type here, block #4` and it was overlapped (sometimes by keyboard, sometimes by padding like on gif). Also bottom menu (fixed) also is hidden (but I guess it's minor). The problem here that sometimes the viewport is scrollable, sometimes - not. So it could lead that the user won't see input at all. Check 2._ 2. When you focused the input, you cannot scroll the content. Happens also randomly. _see that `block#4` and `block#5` become fully unaccessible_ 3. The window scrolls out of the viewport and often stacks there. So it leads that you see only part of the page and outer html (which doesn't respect your theme, so could be that half of the page becomes white in dark theme). Really often it's unrecoverable situation and you need to restart webapp (or do some additional magic with js)

_here may see that the window was shifted at top and black bottom part appeared. At first time scrolling movements fixed it, but on the second it completely stacks and nothing helped. Also you may see that bottom toolbar also was shifted and this black part appeared behind it_ 4*. Partially relates to the issue, but I would like to point it here. The browser doesn't respect [overflow-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) so vertical scrolling gestures broke the layout. Again part of the offscreen appeared that regularly stacks there

My Workaround ℹ️

I did some attempts to fix this, and the current solution works as 1. Create the top wrapped div with ```css .h-root { height: var(--tg-viewport-height); } ``` 2. For every focus/blur emit custom events 3. Add event listeners for these custom events to outer div 4. On getting any of these events, subscribe to window.scroll 5. On getting scroll event, scroll outer diff for the `window.scrollTop` and move window to `scrollTo(0, 0)` _It works unstable and randomly in a few cases `window.scrollTo(0, 0)` reports that `window.scrollTop = 0`, but window stays outside the viewport. Also, there is 1sec animation lag for repositioning element, but I wasn't able to find a better solution. If you have any - please share_ 💗 You may find my hardfix here https://github.com/app-get2gether/get2gether.app/blob/1fd3d1e046d71d0c3e3f5234b1aed3ac14a7de19/packages/nextjs/src/hooks/useTelegramViewportResize.ts

Expected Behavior

I expect that viewport::interactive_widget would work, and the virtual keyboard starts to appear without described artifacts

Steps to Reproduce

1. Launch in MiniApp html with multiple inputs, you need to have a few inputs at a bottom of the page. Check TLDR section example
2. Try to focus them

Environment

Device: iPhone 13Pro iOS version: 16.0.2 App version: 10.13 (29023) User-Agent: Mozilla/5.0 (IPhone; CPU iPhone OS 16_0_2 like Mac OS X) AppleWebkit/605.1.15 (KHTML, like Gecko)

[bane-the-dev]

same here, need a fix asap... keyboard on mini app is virtually unusable

[dacom-dark-sun]

Same problem. Make mini app unusable.

[kmsheng]

Confirmed this issue which is not fixed properly at all.

[egnvk]

up