Angular 14 不尊重浏览器兼容性：CSS：虽然不支持，但使用了 inset 属性

Question

我有一个基于 Cordova/Ionic 构建的应用程序，Angular 14。在 Chrome 和 iOS 上一切正常。但是，Android webview 似乎不支持 CSS 的inset -property，这会导致问题，如top: 0; ... top: 0; ... inset: ... 我无法改变这种行为。

xy.component.scss 文件中的以下 css：

::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 由 Angular 编译为以下内容：

sc-modal-wizard-page>div:not(.defines-height){position:absolute;inset:0;overflow:auto}

在 Android 上运行捆绑的应用程序时（模拟器或物理设备没有区别），定位不起作用。 WebView 调试显示，不接受inset:0 （“css 值无效”）。

通过 DevTools 手动添加left, top, bottom, right值可以解决此问题。

Android 系统 WebView 是版本 83.0.4103.106。 我不确定版本控制，但假设 83 对应于铬版本号。 由于在 Chrome 87 中添加了对 inset 的支持，这可以解释该行为。

我现在试图让 Angular 进行相应的编译，但没有成功。 我添加了 a.browserslistsrc 文件和相应的 package (npm i browserslist)。 出于测试目的，我配置了与所有版本的 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

但是，output 仍然包含 inset 属性。 我怎样才能得到 Angular 来编译应用程序，尊重指定的浏览器功能？

Answer 1

我遇到过类似的问题。

在我的例子中，旧的 Safari 是一个问题，将它添加到 .browserslistrc 有助于：

ios 14

Answer 2

针对特定情况的另一种解决方法是仅将top, right, bottom, left规则标记修改为!important 。 使用inset没有可行的表示，因此显式属性在编译时保持：

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