I have an app built based on Cordova/Ionic, Angular 14. Everything is working fine in Chrome and on iOS. However, the Android webview doesn't seem to support the CSS's inset
-property, which leads to issues, as Angular compiles top: 0; ...
to inset: ...
. I am failing to change this behavior.
The following css in a xy.component.scss file:
::ng-deep sc-modal-wizard-page > div:not(.defines-height) {
position: absolute;
top: 0px !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
overflow: auto;
}
get's compiled to the following by Angular:
sc-modal-wizard-page>div:not(.defines-height){position:absolute;inset:0;overflow:auto}
When running the bundled app on Android (emulator or physical device does not make a difference), the positioning does not work. WebView debugging shows, that inset:0
is not accepted ('invalid css value').
Manually adding the left, top, bottom, right
values via DevTools fixes the issue.
Android System WebView is version 83.0.4103.106. I am unsure regarding the versioning, but suppose that 83 corresponds to the chromium version number. As support for inset was added in Chrome 87, this would explain the behavior.
I am now trying to get Angular to compile accordingly, but without success. I added a .browserslistsrc file and the according package (npm i browserslist). For testing purposes I configured the file for compatibility with all versions of Chrome:
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
Chrome >= 0
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
# IE 9-11
However, the output still contains the inset property. How can I get Angular to compile the application, respecting the specified browser capabilities?
I've had a similar issue.
In my case older Safari was an issue, adding this to .browserslistrc helped:
ios 14