Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mini App Webview not rendering properly #1548

Open
2 tasks done
badalya1 opened this issue Sep 14, 2024 · 5 comments
Open
2 tasks done

Mini App Webview not rendering properly #1548

badalya1 opened this issue Sep 14, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@badalya1
Copy link

Checklist

  • I am reporting an issue in existing functionality that does not work as intended
  • I've searched for existing GitHub issues

Description

The webview height is not calculated correctly on some devices.

After running window.Telegram.WebApp.expand(); there is a bar in the bottom that covers the webview. The actual visible area looks like it matches the size of the app if its not expanded. After "pinching out" or "zooming out" everything goes away.

Expected Behavior

The inital load of the app should calculate the webview sizes correctly. It should display the whole all.

Actual Behavior

On initial load, only part of the webview is visible. (although all content under it is interactive, buttons work, input forms work). The bug is present even when not using .expand(), after expanding manually.

Steps to Reproduce

  1. Create a webapp with 100vh (or equivalent)
  2. Set the background color to something visible
  3. Open the app through menu button(don't touch anything else)
  4. Observe

Screenshots and Videos

Here are 2 examples on Iphone 11 Pro Max

Crypto-Iphone12ProMax.MP4
TBank-Iphone12ProMax.MP4

And here are 2 working examples on Iphone 15 pro max

Crypto-Iphone15ProMax.MP4
TBank-Iphone15ProMax.MP4

Environment

Device: IPhone 11 Pro Max

Workd well on IPhone 15 Pro Max

iOS version: 17.2.1

App version: 11.1 (29584)

@badalya1 badalya1 added the bug Something isn't working label Sep 14, 2024
@badalya1
Copy link
Author

Same issue here

No idea yet

@an-parubets
Copy link

I had the same problem on iPhone X. I found solution for my application.

html {
	position: fixed;
	height: auto !important;
}

@stpnov
Copy link

stpnov commented Nov 6, 2024

Still not fixed, very important for us

@Selithrarion
Copy link

tried position: fixed; height: auto !important;
and posted expand event before initialization + added setTimeout app wrapper but no success

@badalya1
Copy link
Author

badalya1 commented Nov 18, 2024

This problem itself cannot be fixed with css alone.

I had the same problem on iPhone X. I found solution for my application.

html {
	position: fixed;
	height: auto !important;
}

tried position: fixed; height: auto !important; and posted expand event before initialization + added setTimeout app wrapper but no success

The is a bug with the IOS App that places the webview. Remember that all buttons and functionality behind the black bar is functioning (you can interact with the dom below it)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants