[Bug]: Incorrect window.innerHeight is causing the page to be covered

[chang0022]

Telegram Application

Telegram for Android, Telegram for iOS

Describe the Bug

It's very werid. When entering the bot and entering the mini app through the menu button, an incorrect height will be obtained. The picture 1 is wrong. The red area at the bottom is somewhat obscured. It often occurs when entering bot and opening the mini app for the first time.

window.innerHeight is full height.

The Telegram Mini Apps React Template is used. red area code

// src/pages/IndexPage/IndexPage.tsx
<div
  style={{
    height: '60px',
    width: '100%',
    position: 'fixed',
    bottom: 0,
    left: 0,
    backgroundColor: 'red',
  }}
/>

The picture 2 is right.

window.innerHeight is not include tg bot input box's height.

If you open it again through the menu button after chatting with the bot, or import the official script. Everything became right.

I suspect something went wrong in the initialization lifecycle.

I'm looking at the code and haven't found the cause of the problem yet. If I find the bug, I will submit a PR to fix it, but I would also like to ask you to take a look at the problem. You are more familiar with the tg code.

Thx 👍

To Reproduce

Steps to reproduce the behavior:

1. Go to one bot
2. Click on Menu Button
3. Wait for page open
4. See error

Expected Behavior

The page displays normally.

[heyqbnk]

tma.js or Telegram SDK doesn't do anything with window.innerHeight. As far as I remember, it is a read-only property also.

This is more likely to be a Telegram for Android bug, but not something related to SDK.

What do you mean by "obscured"?

[chang0022]

What do you mean by "obscured"?

Sorry, maybe covered is correct. Please see the first picture. The fixed red area is below the bot input box. The page height at this time is 802px.

tma.js or Telegram SDK doesn't do anything with window.innerHeight.

So I feel weird. Use telegram-web-app.js is OK.

[chang0022]

I probably found the reason. The official code window.Telegram.WebApp.MainButton.setParams({}); makes the page right.

 WebView.onEvent('theme_changed', onThemeChanged); // line: 2006

  function onThemeChanged(eventType, eventData) {
    if (eventData.theme_params) {
      setThemeParams(eventData.theme_params);
      window.Telegram.WebApp.MainButton.setParams({}); // line: 328
      updateBackgroundColor();
      receiveWebViewEvent('themeChanged');
    }
  }
`
I guess it is some logic of telegram app initialization page. React code uses type="module" to load asynchronously.

Sorry I don't have a solution yet. I will continue to follow up on this issue.

[chang0022]

I think the problem should be the featurn of tg. Maybe I've had this problem personally. I solved the problem like this. Launch app and send web_app_setup_main_button events immediately.

src/index.tsx

import ReactDOM from 'react-dom/client';

import { Root } from '@/components/Root';

// Uncomment this import in case, you would like to develop the application even outside
// the Telegram application, just in your browser.
import './mockEnv.ts';

import '@telegram-apps/telegram-ui/dist/styles.css';
import './index.css';
import { postEvent } from '@telegram-apps/sdk-react';

// Hide the main button in the Telegram application.
postEvent('web_app_setup_main_button', {
  is_visible: false,
});

ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);

Just for reference if anyone else has this problem.

[RealOFF]

@chang0022 Thank you very much for your workaround

[chang0022]

@RealOFF Glad it's useful to you.