Question : set css safe-area-inset-top

[Aarbel]

trafficstars

Hi @tobspr , thank you for this plugin !

Instead of using custom css variable, can it set safe-area-inset instead ?

In my case i set StatusBar.overlaysWebView(true), but Android doesn't set a safe-area-inset-top (i didn't installed youe plugin, i just want to make my app full screen, i also don't want to use an other variable than safe-area-insets to don't overload 40 files of my css)

[tobspr]

I'm not entirely sure if this works, since on ios you do constant(safe-are-inset-XXX) whereas with a custom variable you do var(my-variable). Correct me if I am wrong, but I don't think this is possible rn (Sorry for the slow response btw)

[tobspr]

I updated the readme with a scss snippet which takes care of managing all variables. Does this work out for you?

[Aarbel]

safe-are-inset-XXX can be directly used in css like env(safe-are-inset-XXX).

Could be great to use the same with your plugin

[tobspr]

Correct me if I am wrong, but you can not set env() variables right now. Or am I misinformed on that? I.e. it would be great if we could just set the safe-area-inset-top environment variable but I don't think thats possible right now.

https://developer.mozilla.org/en-US/docs/Web/CSS/env

Which is why we have to use var()

[Aarbel]

I think you should natively set it so that the native webview viewport of cordova can directly use env(safe-area-inset-XXXX) https://developer.android.com/guide/topics/display-cutout?authuser=2 https://proandroiddev.com/making-notch-friendly-apps-for-android-75776272be5c

[Aarbel]

After 30 minutes of research, the way on android to natively set safe-area-inset env from WindowInsets.getDisplayCutout() to native webview is not very well documented, so surely advanced api to talk about with android teams

[tafelnl]

After 30 minutes of research, the way on android to natively set safe-area-inset env from WindowInsets.getDisplayCutout() to native webview is not very well documented, so surely advanced api to talk about with android teams

Sorry to bump this. But did you ever figure out if there is a way to do this, and if yes how?

[Aarbel]

@tafelnl i don't remember, otherwise it created these two tickets:

• https://github.com/storybookjs/storybook/issues/12852
• https://discourse.mozilla.org/t/question-is-there-a-way-to-override-css-native-env-variable-like-safe-area-inset-top/79675/2
• https://github.com/w3c/csswg-drafts/issues/2627

For now i don't know how safe-area variables are set