Safe area insets CSS env not working on Android

[jbonnett92]

trafficstars

Description

Safe area insets work in CSS env on iOS but not Android

Steps to Reproduce

Create CSS for safe area:

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);

Link to public reproduction project repository

N/A

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Not sure but I have Android 12

Did you find any workaround?

No workaround

Relevant log output

No log

[Eilon]

Hi @jbonnett92 , can you show more info about how you're using this CSS in your app, and also a screenshot showing where the problem is? Ideally you could post a complete repro app to a public GitHub repo so that we can investigate.

[ghost]

Hi @jbonnett92. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[jbonnett92]

I'm sorry I don't have a public repo also a screenshot wouldn't show what the issue is, but I will attach a couple of photos:

The header and footer just have the padding of the env code mentioned above... Which is based on this: https://developer.mozilla.org/en-US/docs/Web/CSS/env#syntax

[ghost]

Hi @jbonnett92. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[jbonnett92]

I already said I can't provide a repo, and it is simple to replicate! My git is blocked by the proxy.

[Eilon]

@jbonnett92 I think we need more info in order to understand the issue. Are you using a WebView? Exactly what HTML is in the webview? Or is it a BlazorWebView? A custom control? Can you circle on the images where you think it is rendering incorrectly? Right now I just don't think we have enough information to go further. If it's simple to replicate, please provide as many details as possible.

[ghost]

Hi @jbonnett92. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[jbonnett92]

@jbonnett92 I think we need more info in order to understand the issue. Are you using a WebView? Exactly what HTML is in the webview? Or is it a BlazorWebView? A custom control? Can you circle on the images where you think it is rendering incorrectly? Right now I just don't think we have enough information to go further. If it's simple to replicate, please provide as many details as possible.

Ahh sorry, I thought it would be obvious from the CSS, I am using Blazor Maui Hybrid. Custom controls are not needed to replicate, just the use of the CSS.

All you need to do is look at the notch on both devices, one overlaps the content, the other doesn't, the CSS ENV should stop this on Android though doesn't.

[Eilon]

Ah, so you're saying that on iPhone it's fine, but on this Android device the text is too close to the notch?

[jbonnett92]

Yes

[Eilon]

Gotcha. And to which selector/element are those CSS attributes applied? The CSS provided in the original post was incomplete.

[Eilon]

And also can you show an example of the HTML that is being shown?

[jbonnett92]

In this case it is just the header, the HTML doesn't matter. But I will post a page in a min to show you what I mean.

[jbonnett92]

Actually I will just give a rundown of code:

<html>
    <body>
    </body>
</html>

html {
    background: #f00;
}

body {
    background: #fff;
    width: 100%;
    height: 100%;
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
    margin-right: env(safe-area-inset-right);
    margin-left: env(safe-area-inset-left);
}

This should give you something looking like this, except for the border is red rather than blue with the center of the page just being white rather than the site itself:

Same goes for this one:

[Eilon]

Alright this looks like it should be enough to continue, thank you!

[jbonnett92]

Awesome, thank you

[jbonnett92]

By the way I don't mind if the anwser is a workaround

[Eilon]

@jbonnett92 my guess is that there's some general issue with WebView on Android and it isn't specific to BlazorWebView, though I couldn't say what exactly.

One possible workaround is to make sure that the BlazorWebView itself is within the safe area, thus it doesn't matter where the BlazorWebView's content is. I think there exist .NET MAUI patterns for ensuring that.

[jbonnett92]

Unfortunetly that will break my design.

[jbonnett92]

It looks like you're right, a bug with the Android WebView yes, as Cordova are having the same issue https://github.com/apache/cordova-android/issues/1465

[ghost]

Hi @jbonnett92. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[drasticactions]

Ignore that, I just finished reading the conversation, didn't notice what was discussed.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[mhrastegari]

You can get it using platform specific (MAUI Android) codes and use JSRuntime to set a value to a CSS variable! that's the solution we came for this issue.

[jbonnett92]

You can get it using platform specific (MAUI Android) codes and use JSRuntime to set a value to a CSS variable! that's the solution we came for this issue.

I've tried that, didn't really work for me.

[mhrastegari]

Still is progress but we did it in our templates! everything you need to know is in MainPage.xaml.cs, AppDeviceCoordinator.cs, App.razor.cs, app.ts, MainLayout.razor and MainLayout.razor.scss.

[jbonnett92]

Still is progress but we did it in our templates! everything you need to know is in MainPage.xaml.cs, AppDeviceCoordinator.cs, App.razor.cs, app.ts, MainLayout.razor and MainLayout.razor.scss.

That is too hacky for something that should be working within the framework, also looks like it requires extra dependencies. Only accounts for the status bar and not the controls menu e.g. "swipe up" or "back, home and multi-tasking". Nor the left and right area.

After attempting to try this, it also didn't work at least not in my case.

[mhrastegari]

Agreed :"( this should be working within the framework.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 2.1. Can repro on Android platforms with sample project.