cssangularandroid-webviewangular14browser-support

Angular 14 does not respect browser compatibility: CSS:inset property used although not supported


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').

Css issue

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?


Solution

  • I've had a similar issue.

    In my case older Safari was an issue, adding this to .browserslistrc helped:

    ios 14