Android 11 css safe-area-insets not applied

[francois-dibulo]

Bug Report

Problem

1. I created a clean cordova project (cordova create hello com.example.hello HelloWorld)
2. Added cordova platform android 10.0.2
3. Build the app on a device with a camera notch

=> The safe-area is considered.

4. Run cordova platform remove android
5. Run cordova platform add android@11.0.0
6. Run cordova run android

=> The safe-area is not considered anymore

Only change I made in the config.xml:

<preference name="Fullscreen" value="true" />

What is expected to happen?

Using css padding safe-area-insets should add a safe-area padding

What does actually happen?

The padding for the safe-area is not added when using android@11.0.0

Information

Command or Code

Environment, Platform, Device

• Huawei P30 Lite, Android
• Google Pixel 6

Version information

cordova: 11.0.0 npm 8.11.0

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[breautek]

Can you reproduce (including it working on cordova-android@10) this on an emulator or on a device that simulates notches (using the Developer Options)? In my experience, CSS safe area insets never properly worked on android, but I also don't have a physical device with notches either.

[francois-dibulo]

Yes:

I used the Developer Option to simulate a notch (double cutout)

Result with android-10.1.1:

(the black bar is the notch space)

Result with android-11.0.0:

The notch / black bar is not considered - the css safe-area styles don't seem to get applied

I didn't change anything except changing the platforms from 10.1.1 to 11.0.0

[francois-dibulo]

Sorry, but any update on this? Anything else I could try? Thank you!

[breautek]

Sorry, but any update on this? Anything else I could try? Thank you!

Sorry, I haven't had a chance to look at this myself. I'm not really sure at this time.

I can say that Cordova doesn't implement browser features (Cordova isn't the browser, it's just a packaging tool providing resources to be used by the system's webview). So it's really strange see a browser feature suddenly not work between two different cordova-android versions and it's definitely not clear what might be the cause of it.

If someone wants to poke around, the commits since v10.1.1 can be found here

If I were to take a wild guess, cordova-android 11 implements the new splashscreen API that Android offers, for API 32 support. This involves making changes to the app theme. You could try forking cordova-android and reverting this commit to see if it changes anything. Hopefully it won't completely break the build... it may cause issues related to the splashscreen, but if it fixes the safe area inset, then we know it's something within this splashscreen PR that is causing the issue.

[ljudbane]

Here are the pictures of how this looks like on a real device.

cordova-android 10:

cordova-android 11:

I'm guessing the webview wasn't all the way to the top before, but it is now.

[ljudbane]

While further exploring this issue i found this resource: https://developer.android.com/guide/topics/display-cutout.

The way the cutout behaves, can be defined in manifest inside