Incorrect viewport height on Android devices

[daniilkananenka]

Platform

Select platforms where this bug is reproducible:

• [x] Telegram for Android
• [ ] Telegram for iOS
• [ ] Telegram for macOS
• [ ] Telegram Desktop
• [ ] Telegram Web A
• [ ] Telegram Web K

Describe the bug

I am developing Telegram Mini app using Next.JS framework with App router. I am using @tma.js/sdk-react package. And there is an issue on every Android device. When you open mini app via Menu button, bottom part of it is hidden under user message input. Like on the image, on the left side.

To Reproduce

Steps to reproduce the behavior:

1. Open mini app

Expected behavior

I want the mini app to open with correct viewport height. May be I am doing something wrong?

[heyqbnk]

What do you mean by "correct viewport height"? What should it be?

[daniilkananenka]

Look. When I open the mini-app using the Menu Button inside the bot, the application does not recognize the visible area, and it turns out that part of the application is hidden under the message input field. Here are screenshots of how it works now, and how it should. (Navigation bar is a fixed element)

[heyqbnk]

Check if env(safe-area-inset-bottom) fits your needs

https://developer.mozilla.org/en-US/docs/Web/CSS/env

[daniilkananenka]

I've tried different ways of using env(safe-area-inset-bottom). Both directly in CSS, and through a special Tailwind plugin and based on this answer. But none of the above works.

Additionally, I noticed the following behavior. When I log into the bot and open the application through the Menu button, part of the application is hidden under the message input field. But if I click on the message input field (the keyboard opens and the Mini app closes), and then re-open the Mini app through the Menu button, then all the problems disappear and the application is displayed in the desired form.

[daniilkananenka]

@heyqbnk I just found the solution to my problem. I added the @twa-dev/sdk package and added

useEffect(() => {
  if (typeof window !== 'undefined') {
    WebApp.ready();
  }
}, []);

I tried to do the same using miniApp?.ready() but it didn't work.(

[heyqbnk]

First of all, miniApp.ready() does exactly the same. Secondly, using both Telegram SDK and tma.js in the same app will surely lead to bugs

[daniilkananenka]

Yes, I understand. I will try further. In any case, thank you very much for your time😅. I think this issue can be closed

[deadsandro]

@Kononenko-Daniil

temporary fix postEvent('web_app_setup_main_button', {is_visible: false}) before miniApp.ready()

[daniilkananenka]

@Kononenko-Daniil

temporary fix postEvent('web_app_setup_main_button', {is_visible: false}) before miniApp.ready()

I have already solved this problem. I have added <Script src="https://telegram.org/js/telegram-web-app.js" strategy="beforeInteractive" />. I forgot about it)

[chang0022]

@deadsandro Bro, I just found this issue. 🤣 I also found this problem and used the same solution. I found this code in telegram-web-app.js

function onThemeChanged(eventType, eventData) {
  if (eventData.theme_params) {
    setThemeParams(eventData.theme_params);
    window.Telegram.WebApp.MainButton.setParams({}); // line: 328
    updateBackgroundColor();
    receiveWebViewEvent('themeChanged');
  }
}