You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to implement a chat on top of Telegram Mini Apps, and found out that the IPhone bottom white bar is closing some elements that are sticked to the bottom of the screen. For these scenarios we could just add a padding-bottom: env(safe-area-inset-bottom) as described here https://webkit.org/blog/7929/designing-websites-for-iphone-x/. It works inside iOS Chrome, iOS Safari, but not inside Telegram Mini Apps.
Expected Behavior
What we get in Chrome and Safari:
Actual Behavior
Instead the padding does not work, probably because the padding-bottom: env(safe-area-inset-bottom) resolves to padding-bottom: 0 or none
Steps to Reproduce
Host a simple code like this <div style="height: env(safe-area-inset-bottom); background-color: red"></div>
Check it on an IPhone device horizontally, so the bottom browser navigation hides, and the white bar starts covering the visible web view
You should see a red line
Do the same thing inside Telegram Web App, the red line does not show up, although the white bar covers the visible content.
Environment
Device:iPhone 14 Pro Max
iOS version: 17.2.1
App version:10.9.2
The text was updated successfully, but these errors were encountered:
I fully support this thread. There is a problem at least in the implementation of the "bottom navbar" component. I would really like to see a non-crutch solution
I don’t understand what the Telegram developers relied on when creating the automatic addition of safe zones. This adds a lot of problems, just like specifying the webview height. The only solution to the problems with safe zones is to keep the classic approach, and not create something crooked.
@Edgar-P-yan, you can calculate the difference between the height obtained from viewportHeight and window.innerHeight. This will give you the safe zone value. This works just as poorly as the option that Telegram offers. But I don’t know any other options yet =(
Checklist
Description
I'm trying to implement a chat on top of Telegram Mini Apps, and found out that the IPhone bottom white bar is closing some elements that are sticked to the bottom of the screen. For these scenarios we could just add a
padding-bottom: env(safe-area-inset-bottom)
as described here https://webkit.org/blog/7929/designing-websites-for-iphone-x/. It works inside iOS Chrome, iOS Safari, but not inside Telegram Mini Apps.Expected Behavior
What we get in Chrome and Safari:
![image](https://private-user-images.githubusercontent.com/35116136/317547601-8a2f286a-ef82-4518-96f9-191cfe55d2d1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5MjI0MTIsIm5iZiI6MTcxODkyMjExMiwicGF0aCI6Ii8zNTExNjEzNi8zMTc1NDc2MDEtOGEyZjI4NmEtZWY4Mi00NTE4LTk2ZjktMTkxY2ZlNTVkMmQxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDIyMjE1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE2OGE2Yjc3MmNmM2Y0YjlhZmYwMzViMzVhYTVmM2JlYzUyOTk0MWI3ODUzNzQ3YzUwMGM4MzQ1ZWVkOTIyN2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.EZXxsLVzFhYZaQdesPbbxRPFW05iitUXjBzH487FiOQ)
![image](https://private-user-images.githubusercontent.com/35116136/317547672-96f02324-5a60-4e0f-a530-968868d93fbb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5MjI0MTIsIm5iZiI6MTcxODkyMjExMiwicGF0aCI6Ii8zNTExNjEzNi8zMTc1NDc2NzItOTZmMDIzMjQtNWE2MC00ZTBmLWE1MzAtOTY4ODY4ZDkzZmJiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDIyMjE1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRjNmE1YmU0Zjg4MjEzZTU1MTAxMGY1YjAwZjE3MzVlOTM5NTlmNjU1N2MyMTEwMTE1MWJiZTYxOWI0YzI0ZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.SJHkFzdsJP_lzckVu-uYTxUZkEyLMgOt-uSoskSO63s)
Actual Behavior
Instead the padding does not work, probably because the
padding-bottom: env(safe-area-inset-bottom)
resolves topadding-bottom: 0 or none
Steps to Reproduce
<div style="height: env(safe-area-inset-bottom); background-color: red"></div>
Environment
Device:
iPhone 14 Pro Max
iOS version:
17.2.1
App version:
10.9.2
The text was updated successfully, but these errors were encountered: