Telegram-iOS MiniApp, virtual keyboard overlaps the content and shifts window improperly

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)

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 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.
When you focused the input, you cannot scroll the content. Happens also randomly.

see that block#4 and block#5 become 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.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

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)

Jun 03 '24 16:06 gurobokum

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

Sep 30 '24 14:09 bane-the-dev

Same problem. Make mini app unusable.

Oct 18 '24 19:10 dacom-dark-sun

Confirmed this issue which is not fixed properly at all.

Oct 25 '24 05:10 kmsheng

up

Nov 08 '24 06:11 egnvk

Same issue. For some reason enabling MainButton fixes this for me. Might not work in all cases if you cannot incorporate main button into your UI.

Nov 18 '24 12:11 Avseek

Same issue, this issue only occurred on iOS.

Nov 26 '24 02:11 NguyenDucThuanBKDN

Same issue, appears only on iOS. On Android everything is working properly

Dec 02 '24 18:12 T-Rex

Same issue, appears only on iOS

Dec 02 '24 18:12 MrBiGNoise

(No Subject) Monday Dec 2, 2024

Location Norwich, CT, USA https://www.google.com/maps/search/Norwich,+CT,+USA?hl=en

Join with Google Meet https://meet.google.com/qrv-hxmz-nes?hs=224

Organizer Shane Caffrey @.***

Guests Shane Caffrey - organizer @.*** View all guest info
https://calendar.google.com/calendar/event?action=VIEW&eid=NzRvNmNkMzFjaGk2NGI5aTZoZ2ppYjlrNmRpMzRiYjE2NWkzYWI5azY5ajNpb2ozY2dxbWFlOWdjbyByZXBseStiYW1kazI2dXpnZXc3cndqaWFveTV0d2ZsaHF2cmV2Ym5oaGl2NmpuamFAcmVwbHkuZ2l0aHViLmNvbQ&tok=MjUjY2FmZnJleXNoYW5lOTAwQGdtYWlsLmNvbTRjNDExZWY2Zjc1OGY2ZWU2MThkYWFkYjE4OTE0NmY1YmY0MDE3Yjk&ctz=UTC&hl=en&es=0

Reply for @.***
and view more details
https://calendar.google.com/calendar/event?action=VIEW&eid=NzRvNmNkMzFjaGk2NGI5aTZoZ2ppYjlrNmRpMzRiYjE2NWkzYWI5azY5ajNpb2ozY2dxbWFlOWdjbyByZXBseStiYW1kazI2dXpnZXc3cndqaWFveTV0d2ZsaHF2cmV2Ym5oaGl2NmpuamFAcmVwbHkuZ2l0aHViLmNvbQ&tok=MjUjY2FmZnJleXNoYW5lOTAwQGdtYWlsLmNvbTRjNDExZWY2Zjc1OGY2ZWU2MThkYWFkYjE4OTE0NmY1YmY0MDE3Yjk&ctz=UTC&hl=en&es=0 Your attendance is optional.

~~//~~ Invitation from Google Calendar: https://calendar.google.com/calendar/

You are receiving this email because you are an attendee on the event. To
stop receiving future updates for this event, decline this event.

Forwarding this invitation could allow any recipient to send a response to
the organizer, be added to the guest list, invite others regardless of
their own invitation status, or modify your RSVP.

Learn more https://support.google.com/calendar/answer/37135#forwarding

Dec 02 '24 19:12 Backhomejjk

Any updates? I have the same problem

Jan 02 '25 06:01 borzovplus

I also had the same issue. Here is a solution:

document.addEventListener('click', (event) => {
  const tags = ['INPUT', 'TEXTAREA']
  const focused = document.activeElement
  console.log(focused.tagName)

  if (focused && focused !== event.target && tags.includes(focused.tagName)) {
    focused.blur()
  }
})

Jan 02 '25 13:01 soluchok

I have this problem too

Jan 11 '25 09:01 hdsujnb

Saw that a fixed was pushed here: https://github.com/TelegramMessenger/Telegram-iOS/pull/1430 But unsure how it affects. Anyone knows?

Jan 14 '25 09:01 PL-Ian

Hi! I have this problem too, only on iOS touch devices, somebody already fixed it ?

Jan 17 '25 07:01 flu4fyOF

Bump

Feb 19 '25 17:02 whynotmarc

Any news?

Mar 06 '25 05:03 underwear

Same problems)))))))

Mar 10 '25 18:03 StAl15

In app @wallet when you send money to external crypto wallet, it shows input without this issue on iphone

Mar 11 '25 00:03 underwear

up

Apr 01 '25 10:04 snoups

Up

Apr 01 '25 11:04 DmitryKrylovv

Up

Apr 01 '25 11:04 lolerfox

up

Apr 01 '25 12:04 underwear

up

Apr 01 '25 13:04 flake92

Another crutch:

    document.addEventListener('touchstart', function (event) {
        const isInput = event.target.closest('input, textarea');

        if (!isInput) {
            document.activeElement.blur();
        }
    }, { passive: true });