search

Telegram-Mini-Apps / issues

Centralised storage of platform issues and enhancement proposals.
8 stars 1 forks source link

Incorrect viewport height on Android devices #25

Closed daniilkananenka closed 3 months ago

daniilkananenka commented 3 months ago

Platform

Select platforms where this bug is reproducible:

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.

image

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 commented 3 months ago

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

daniilkananenka commented 3 months ago

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 commented 3 months ago

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

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

daniilkananenka commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@Kononenko-Daniil

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

daniilkananenka commented 3 months ago

@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 commented 2 months ago

@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');
  }
}