Telegram-iOS icon indicating copy to clipboard operation
Telegram-iOS copied to clipboard

Mini App Webview not rendering properly

Open badalya1 opened this issue 1 year ago • 5 comments

Checklist

  • [x] I am reporting an issue in existing functionality that does not work as intended
  • [x] 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

https://github.com/user-attachments/assets/74e8beb7-a440-4e50-866b-35256cacbc94

https://github.com/user-attachments/assets/3d569933-b8e3-447e-bd41-c780d9b849be

And here are 2 working examples on Iphone 15 pro max

https://github.com/user-attachments/assets/62a1c502-7986-4018-b545-51195992d643

https://github.com/user-attachments/assets/81d2c6e0-e344-4b86-9164-85d6e731badc

Environment

Device: IPhone 11 Pro Max

Workd well on IPhone 15 Pro Max

iOS version: 17.2.1

App version: 11.1 (29584)

badalya1 avatar Sep 14 '24 00:09 badalya1

Same issue here

No idea yet

badalya1 avatar Sep 22 '24 15:09 badalya1

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

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

an-parubets avatar Oct 12 '24 12:10 an-parubets

Still not fixed, very important for us

stpnov avatar Nov 06 '24 15:11 stpnov

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

Selithrarion avatar Nov 06 '24 15:11 Selithrarion

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)

badalya1 avatar Nov 18 '24 13:11 badalya1