Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android 11 css safe-area-insets not applied

See original GitHub issue

Bug Report

Problem

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

=> The safe-area is considered.

Run cordova platform remove android
Run cordova platform add android@11.0.0
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

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

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:18 (6 by maintainers)

Top GitHub Comments

3reactions

ljudbanecommented, Aug 16, 2022

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 <style>. So i tried adding

<item name="android:windowLayoutInDisplayCutoutMode">
            never
</item>

to file platforms/android/app/src/main/res/values/themes.xml and i got the top black bar back. The Android studio warned me that this option was only available from some Android version on so i let it create a values-v27/themes.xml override file.

As to why the default behaviour changed, i don’t know. Maybe because we target higher API version now. Or because theme on main activity was changed to @style/Theme.App.SplashScreen.

Since i need a quick solution to this i will be creating a after_platform_add hook in my project that will create a values-v27/themes.xml file in the Android project.

Maybe in the future this could be controlled with a setting in config.xml 😃

2reactions

kovacs-tamascommented, Nov 23, 2022

Looks like the latest Android System WebView (107.0.5304.105) solved the problem. I’ve checked with 108.* Beta and 109.* Dev builds also, they work well