You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by GitBox <gi...@apache.org> on 2022/07/26 10:11:46 UTC
[GitHub] [cordova-android] francois-n-dream opened a new issue, #1465: Android 11 css safe-area-insets not applied
francois-n-dream opened a new issue, #1465:
URL: https://github.com/apache/cordova-android/issues/1465
# Bug Report
## Problem
1. I created a clean cordova project
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
<!-- Include all relevant information that might help understand and reproduce the problem -->
### Command or Code
<!-- What command or code is needed to reproduce the problem? -->
### 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
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1353207897
I think using `"android:windowLayoutInDisplayCutoutMode"="never"` is not really a great fix from a Cordova standpoint. e.g. it's not something we can apply generically.
From my understanding based on the [Android Docs](https://developer.android.com/develop/ui/views/layout/display-cutout#choose_how_your_app_handles_cutout_areas), `never` makes it so the app never consumes the cutout/unsafe space. Which is why it kind of fixes the issue but it also strips control away and I assume it produces blank space in the unsafe areas, likely black. This is why I think we cannot apply this generically The blank space color might be configurable via the `BackgroundColor` preference.
We could add a preference to configure this, but if a workaround can be done simply by providing a resource-file, I think I'd prefer documenting that approach rather than adding a feature option that we would have to maintain thereafter, especially since this feature is just for a workaround to an upstream chromium bug.
@cxcxcxcx If you could provide a full example of the workaround including the contents of `resources/android/xml/themes_v27.xml`, I think that would be helpful. I find how to apply the workaround from https://github.com/apache/cordova-android/issues/1465#issuecomment-1216730224 is not completely clear. Later I can take it and document it to the [Android Quirks](https://cordova.apache.org/docs/en/11.x/guide/platforms/android/index.html#android-quirks)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "breautek (via GitHub)" <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1507152602
> Is there any existing Cordova plugin that can work around this in the mean time? Perhaps someone who has a good workaround could publish one? I'd much appreciate it!
I just open sourced our internal package we are using [@totalpave/cordova-plugin-insets](https://github.com/totalpaveinc/cordova-plugin-insets/blob/main/src/www/Insets.ts). I don't have documentation written but you can add a listener for inset changes like so:
```javascript
totalpave.Insets.addListener((inset) => {
/* inset = {
top: number;
right: number;
bottom: number;
left: number;
};
*/
})
```
The plugin provides an Android implementation only. So if you support multiple platforms, you need to guard it. Will be publishing to official NPM registry soon.
The plugin isn't perfect and currently does produce an issue on app launch where the bottom inset is higher than expected. It's also not yet used in any of our production apps.
Because I don't foresee a reasonable fix (I believe it is an Android Webview bug), I'll be removing this from the 12.x milestone.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "breautek (via GitHub)" <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1574100446
> Only on Android 13 device with Android platform 11, we see top and bottom area invisible. Planned to use
@totalpave/cordova-plugin-insets plugin, but when we try to build the app using cordova-plugin-insets plugin getting below error.
We observed insets.js file is not in the directory, instead we see insets.ts in these location 'plugins@totalpave\cordova-plugin-insets\src\www\Insets.ts'
May I ask how you're installing the plugin?
The repo doesn't contain the built js files, but the npm package shoudl contain them. So if you're installing from NPM it should work (e.g. `cordova plugin add @totalpave/cordova-plugin-insets`) If you're installing directly from git, it won't work since the JS files are gitignored.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] LorinczTimotei commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
LorinczTimotei commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1363777780
I had the same problem on Android 13 phones
**but**
I was able to solve the problem by deleting the plugin cordova-plugin-statusbar@3.0.0 and installing the plugin diogo-cordova-plugin-statusbar@0.0.6
**and**
to be ok on android 12 or lower, I also put in .css
html.device-android .statusbar,
html.device-ios .statusbar {
height: constant(safe-area-inset-top);
height: env(safe-area-inset-top);
}
html.device-android.device-android-13 .statusbar {
height: initial;
}
html.with-statusbar.device-android .framework7-root,
html.with-statusbar.device-ios .framework7-root {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
html.with-statusbar.device-android.device-android-13 .framework7-root {
padding-top: initial;
}
**I know "safe-area-inset-top" doesn't work for Android, but I set it to override for Android 12 or lower, which is set by default!**
That's how it works for me, ok :)
I use cordova 11.0.0, cordova android 11.0.0 and framework7 with vue.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1209248064
> 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](https://github.com/apache/cordova-android/compare/e188c61c8694dc036ada3c0f14577ef5cfdfb0d7...d8287854354806f16f0b1bf3b93997780c4626d0)
If I were to take a wild guess, cordova-android 11 implements the new [splashscreen](https://github.com/apache/cordova-android/commit/606e9c482687dc3818186a02974a747cb183f73c) 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.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] francois-n-dream commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
francois-n-dream commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1204112099
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``
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
Re: [I] Android 11 css safe-area-insets not applied [cordova-android]
Posted by "AshleyScirra (via GitHub)" <gi...@apache.org>.
AshleyScirra commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1892406583
FWIW we use `cordova-plugin-android-notch` to work around this - it still seems to work fine, although you have to implement safe area logic with JavaScript.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1196168143
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.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek closed issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
breautek closed issue #1465: Android 11 css safe-area-insets not applied
URL: https://github.com/apache/cordova-android/issues/1465
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] ljudbane commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
ljudbane commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1216730224
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 :)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] ljudbane commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
ljudbane commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1216658812
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.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "breautek (via GitHub)" <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1476172824
Upstream Android WebView Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1094366
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1353271158
Ah yah, if you're cloning the theme... that kinda makes me want to add a preference. That workaround creates a high risk of breakage since it depends on you kinda re-implementing things required for Cordova, which if Cordova changes the splashscreen things, it will end up likely breaking. So a preference will allow Cordova to actually manage it in a way that you don't need to clone.
I'll re-open this issue. I'm hoping to find at least some time over the xmas break to work on some cordova stuff. I'll see if I can find a way to make the change so that it produces both the existing theme, and a `v27` version of that theme which will include `android:windowLayoutInDisplayCutoutMode` as a configurable property. I'll default the value to `never`, taking the word that it reverts Cordova apps to previous behaviour as seen in cordova-android@10. As you say, we can re-evaluate the defaults later should upstream fixes the issue.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] AshleyScirra commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "AshleyScirra (via GitHub)" <gi...@apache.org>.
AshleyScirra commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1476345875
Is there any existing Cordova plugin that can work around this in the mean time? Perhaps someone who has a good workaround could publish one? I'd much appreciate it!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
Re: [I] Android 11 css safe-area-insets not applied [cordova-android]
Posted by "AndyCavedal (via GitHub)" <gi...@apache.org>.
AndyCavedal commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1889544513
Is there anyway then to use the Capacitor plugin for safe-area, in a Cordova Ionic application? Are they compatible with each other?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] nijakobius commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
nijakobius commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1297366740
I have the solution!
1. Add this to your `<head>`:
```
<style>
:root {
--safe-area-top : env(safe-area-inset-top);
--safe-area-bottom: env(safe-area-inset-bottom);
}
</style>
```
2. Add the StatusBar plugin: https://github.com/apache/cordova-plugin-statusbar
3. Use `<preference name="StatusBarOverlaysWebView" value="false" />`
4. Add the following JavaScript:
```
document.addEventListener('deviceready', () => {
var initialHeight = document.documentElement.clientHeight;
window.addEventListener('resize', getStatusBarHeight);
StatusBar.overlaysWebView(true);
function getStatusBarHeight() {
var currentHeight = document.documentElement.clientHeight;
document.documentElement.style.setProperty('--safe-area-top', (currentHeight - initialHeight) + 'px');
window.removeEventListener('resize', getStatusBarHeight);
}
}, false);
```
This will first calculate the `clientHeight` WITH the StatusBar and then WITHOUT it. The difference will be saved in a CSS variable. Then, in your CSS just use `var(--safe-area-top)` wherever you would have used `env(safe-area-inset-top)` :)
For a quick test, add the following to `<body>` and you'll see that the red box (using `env(safe-area-inset-top)`) ignores the safe area while the blue box (`var(--safe-area-top)` respects it:
```
<div style="position: absolute; z-index: 2000; top: env(safe-area-inset-top); height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 3px); width: 5vw; background-color: rgba(255, 0, 0, .1); border: 1px solid red; "></div>
<div style="position: absolute; z-index: 2000; left: 5vw; top: var(--safe-area-top); height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom) - 3px); width: 5vw; background-color: rgba(0, 0, 255, .1); border: 1px solid blue;"></div>
```
<img width="644" alt="Screenshot 2022-10-31 at 17 37 31" src="https://user-images.githubusercontent.com/37240226/199061068-4cb61c2e-63b4-4a3e-8c0b-ae12b66db38a.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] francois-n-dream commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
francois-n-dream commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1209114802
Sorry, but any update on this? Anything else I could try?
Thank you!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] cxcxcxcx commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
cxcxcxcx commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1353254846
> The blank space color might be configurable via the BackgroundColor preference.
For my device, it's black, but also the same color as the phone edge. I didn't notice it until I upgraded to cordova-android 11. It's probably a fallback mechanism that phone manufactuers considered to support older apps.
> We could add a preference to configure this, but if a workaround can be done simply by providing a resource-file, I think I'd prefer documenting that approach rather than adding a feature option that we would have to maintain thereafter, especially since this feature is just for a workaround to an upstream chromium bug.
Yeah, it's weird to workaround an upstream bug. However, because cordova is largely about enabling HTML5 on native apps, the upstream bug sounds a deal-breaker: almost all apps will suffer, but developers may not realize just because they don't have test devices with cutouts.
Forcing not using the cutout space is not ideal, but it's reverting to the cordova-android 10 behavior. Power users can still customize using hooks, and the default behavior will be decent.
>
> @cxcxcxcx If you could provide a full example of the workaround including the contents of `resources/android/xml/themes_v27.xml`, I think that would be helpful. I find how to apply the workaround from [#1465 (comment)](https://github.com/apache/cordova-android/issues/1465#issuecomment-1216730224) is not completely clear. Later I can take it and document it to the [Android Quirks](https://cordova.apache.org/docs/en/11.x/guide/platforms/android/index.html#android-quirks) section.
I cloned the `themes.xml` file:
```
$ cat resources/android/xml/themes_v27.xml
<?xml version='1.0' encoding='utf-8'?>
<resources>
<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen.IconBackground">
<item name="windowSplashScreenBackground">@color/cdv_splashscreen_background</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/ic_cdv_splashscreen</item>
<item name="windowSplashScreenAnimationDuration">200</item>
<item name="postSplashScreenTheme">@style/Theme.AppCompat.NoActionBar</item>
<item name="android:windowLayoutInDisplayCutoutMode">never</item>
</style>
</resources>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] ramesh0452 commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "ramesh0452 (via GitHub)" <gi...@apache.org>.
ramesh0452 commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1574093277
@breautek Only on Android 13 device with Android platform 11, we see top and bottom area invisible. Planned to use
@totalpave/cordova-plugin-insets plugin, but when we try to build the app using cordova-plugin-insets plugin getting below error.
We observed insets.js file is not in the directory, instead we see insets.ts in these location 'plugins\@totalpave\cordova-plugin-insets\src\www\Insets.ts'
Discovered plugin "cordova-plugin-insets". Adding it to the project
Installing "@totalpave/cordova-plugin-insets" for android
Error during processing of action! Attempting to revert...
Failed to install '@totalpave/cordova-plugin-insets': Error: Uh oh!
ENOENT: no such file or directory, open 'C:\app\build\plugins\@totalpave\cordova-plugin-insets\www\insets.js'
at Object.openSync (fs.js:498:3)
at Object.readFileSync (fs.js:394:35)
at install (C:\app\build\node_modules\cordova-android\lib\pluginHandlers.js:162:36)
at ActionStack.process (C:\app\build\node_modules\cordova-common\src\ActionStack.js:56:25)
at PluginManager.doOperation (C:\app\build\node_modules\cordova-common\src\PluginManager.js:112:24)
at PluginManager.addPlugin (C:\app\build\node_modules\cordova-common\src\PluginManager.js:142:21)
at C:\app\build\node_modules\cordova-android\lib\Api.js:155:78
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] boengli commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
boengli commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1228293140
Any update on this issue?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] kovacs-tamas commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
kovacs-tamas commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1325218527
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
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1335172325
> Thanks @nijakobius for providing a workaround. We could add this code with a note about this issue to the README files under the Android quirks section. What do you think?
If we add a note, I'd rather just link to the comment using https://github.com/apache/cordova-android/issues/1465#issuecomment-1297366740 than have code in-pace I think. In effort to keep the README docs clean/concise.
Since it was determine that this was a system webview issue, I'll be closing this issue. Should be resolved if the device has version `107.0.5304.105` or later. If the issue persists, I suggest checking the installed `Android System Webview` version and ensuring you have at least version `107.0.5304.105`, and if not, try updating the webview. If the issue still persists, then a comment can be made and one of us can reopen this issue.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] breautek commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "breautek (via GitHub)" <gi...@apache.org>.
breautek commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1476177905
Moving this from the 11.0.1 milestone to 12.0.0 milestone because master already has the major version bump, however unsure if the workaround noted in https://github.com/apache/cordova-android/issues/1465#issuecomment-1353254846 will make it. I feel it may be better to document the quirk and provide instructions on how to implement the workaround solution instead.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] AshleyScirra commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
AshleyScirra commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1337219601
The issue still reproduces for me on a Nokia 7.1 with Android System WebView 107.0.5304.141.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] cxcxcxcx commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
cxcxcxcx commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1352669859
The issue reproduces for Samsung Galaxy S21, webview 108.0.5359.79
https://github.com/apache/cordova-android/issues/1465#issuecomment-1297366740 doesn't always work: my app is landscape.
https://github.com/apache/cordova-android/issues/1465#issuecomment-1216730224 works for me. It doesn't have to be a script. After themes_v27.xml is created, the following works in config.xml, android section:
```
<resource-file src="resources/android/xml/themes_v27.xml" target="app/src/main/res/values-v27/themes.xml" />
```
I think it's a decent fix because the behavior is consistent with previous versions. And it can always be improved once the upstream Chromium bug is fixed.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] boengli commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
boengli commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1260660609
Still no update? ☹️
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] NiklasMerz commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by GitBox <gi...@apache.org>.
NiklasMerz commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1303800536
Looks like we need to wait for Android to support the safe-area. See this Chromium Bug.
Thanks @nijakobius for providing a workaround. We could add this code with a note about this issue to the README files under the Android quirks section. What do you think?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] DavidTalevski commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "DavidTalevski (via GitHub)" <gi...@apache.org>.
DavidTalevski commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1476238564
The current workaround I'm using is creating a hook named: "windowLayoutInDisplayCutoutMode". Here's the code for the hook:
```javascript
const fs = require('fs');
const path = require("path");
module.exports = function (ctx) {
const xml = `<?xml version='1.0' encoding='utf-8'?>
<resources>
<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen.IconBackground">
<item name="windowSplashScreenBackground">@color/cdv_splashscreen_background</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/ic_cdv_splashscreen</item>
<item name="windowSplashScreenAnimationDuration">200</item>
<item name="postSplashScreenTheme">@style/Theme.AppCompat.NoActionBar</item>
<item name="android:windowLayoutInDisplayCutoutMode">never</item>
</style>
</resources>`
const themesXML = path.join(ctx.opts.projectRoot, 'platforms/android/app/src/main/res/values/themes.xml');
fs.writeFileSync(themesXML, xml);
};
```
And then I imported the hook in the projects config.xml:
```xml
<platform name="android">
<hook type="after_platform_add" src="hooks/android/windowLayoutInDisplayCutoutMode.js" />
</platform>
```
The settings probably won't work for anyone, the best way would be to parse the XML and just insert the tag into it.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] ramesh0452 commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "ramesh0452 (via GitHub)" <gi...@apache.org>.
ramesh0452 commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1574118233
Thanks for the reply.
added using git clone, if I add using NPM it is adding the plugin.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-android] DavidTalevski commented on issue #1465: Android 11 css safe-area-insets not applied
Posted by "DavidTalevski (via GitHub)" <gi...@apache.org>.
DavidTalevski commented on issue #1465:
URL: https://github.com/apache/cordova-android/issues/1465#issuecomment-1462214976
Any updates about the preference?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org