MiniApp, virtual keyboard overlaps the content and shifts window improperly #1410
Description
Checklist
- I am reporting an issue in existing functionality that does not work as intended
- I've searched for existing GitHub issues
Similar issue [Mini Apps] Incorrect viewport shift when OSK is open #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)
export default function HomePage() {
return (
<main>
<div className="bg-red-200 h-[175px]">
<h2>Block #1</h2>
<input type="text input" placeholder="Type here, block #1" />
</div>
<div className="bg-green-200 h-[175px]">
<h2>Block #2</h2>
<input type="text input" placeholder="Type here, block #2" />
</div>
<div className="bg-blue-200 h-[175px]">
<h2>Block #3</h2>
<input type="text input" placeholder="Type here, block #3" />
</div>
<div className="bg-gray-200">
<h2>Block #4</h2>
<input type="text input" placeholder="Type here, block #4" />
</div>
<div className="bg-yellow-200 h-[175px]">
<h2>Block #5</h2>
<input type="text input" placeholder="Type here, block #5" />
</div>
</main>
);
}-
iOS client I use doesn't respect viewport::interactive_widget 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 haveposition:fixedelements 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 #4and 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. -
When you focused the input, you cannot scroll the content. Happens also randomly.
see that
block#4andblock#5become fully unaccessible -
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 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
- Create the top wrapped div with
.h-root { height: var(--tg-viewport-height); }
- For every focus/blur emit custom events
- Add event listeners for these custom events to outer div
- On getting any of these events, subscribe to window.scroll
- On getting scroll event, scroll outer diff for the
window.scrollTopand move window toscrollTo(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
- Launch in MiniApp html with multiple inputs, you need to have a few inputs at a bottom of the page. Check TLDR section example
- 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)