Angular 14编译CSS生成inset属性致Android WebView兼容性问题求助

问题根源 #

Angular的CSS优化工具（cssnano或autoprefixer）会将top:0; bottom:0; left:0; right:0;合并为inset:0;，但Android System WebView 83版本不支持该属性（inset从Chrome 87开始支持），最终导致元素定位失效。

解决方案 #

1. 修正Browserslist配置 #

确保项目根目录的.browserslistsrc明确指定目标浏览器版本，让编译工具识别需要兼容低版本WebView：

Chrome >= 83
Android >= 83
not dead

2. 配置PostCSS禁用inset属性合并 #

在项目根目录创建postcss.config.js，强制禁用逻辑属性转换和CSS长属性合并：

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Chrome >= 83', 'Android >= 83'],
      // 禁用逻辑属性转换（包含inset的生成）
      features: {
        'logical-properties-and-values': false
      }
    },
    cssnano: {
      preset: [
        'default',
        {
          // 禁用将四边定位属性合并为inset
          mergeLonghand: false
        }
      ]
    }
  }
};

3. 调整Angular构建配置 #

打开angular.json，在architect > build > options中确保CSS优化配置正确，避免强制合并属性：

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
}

4. 验证编译结果 #

重新构建项目：

ng build --prod

检查编译后的CSS文件，确认top/bottom/left/right未被转换为inset属性。

临时应急方案 #

如果上述配置未立即生效，可在SCSS中添加空注释阻止属性合并（临时解决方案）：

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

内容的提问来源于stack exchange，提问作者Marc