Support env(safe-area-inset-bottom) and others inside Mini Apps

[Edgar-P-yan]

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

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

1. Host a simple code like this <div style="height: env(safe-area-inset-bottom); background-color: red"></div>
2. Check it on an IPhone device horizontally, so the bottom browser navigation hides, and the white bar starts covering the visible web view
3. You should see a red line
4. 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

[dmaximyuk]

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

[GMELUM]

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.

[GMELUM]

@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 =(

[aabbdev]

:root {
     --safe-area-inset-bottom: calc(100vh - var(--tg-viewport-stable-height, 100vh))
}

Example

div.safemybottomelement {
   padding-bottom: calc(1rem + var(--safe-area-inset-bottom));
}
// another example
div.safemybottomelement2 {
   padding-bottom: var(--safe-area-inset-bottom);
}

It's my gift, we can probably close the ticket