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

Question

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?

score 2 · Accepted Answer · answered Jan 09 '23 at 13:09

2

I've had a similar issue.

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

ios 14

answered Jan 09 '23 at 13:09

Bojan Kogoj

5,321
3
35
57

This solution is working Angular 14 wrapped in WebOS app for older smart TV too, in my case i had to set `Chrome >= 52` value in .browserslist – Simo Mar 15 '23 at 15:06

score 0 · Answer 2 · answered Jan 12 '23 at 18:27

Another workaround for the specific case is to modify the CSS rule mark only of top, right, bottom, left as !important. There is no viable representation of this using inset, thus the explicit properties are maintained at compilation:

::ng-deep sc-modal-wizard-page > div:not(.defines-height) {
    position: absolute;
    top: 0px !important;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

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

2 Answers2