modelhelper在360浏览器下显示异常

[snowchenlei]

Reproduction link

https://stackblitz.com/edit/ng-alain-setup-jw7l7v?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

1. 打开ng-alain文档页面
2. 滚动到代码演示
3. 点击Open/Static按钮即可看到效果

What is expected?

模态框显示在中间

What is actually happening?

模态框显示在左上角并出现了滚动条

Environment	Info
ng-alain	14.1.0
Browser	360安全浏览器13

[alain-bot]

Translation of this issue:

Modelhelper shows abnormalities under 360 browsers

REPRODUCTION LINK

[https://stackz.com/edit/ng--setup-jw7l7v?file=src%2FAPPP.CONENENT.TS >/stackBlitz.com/edit/ng- setup-jw7l7v? file = src%2FAPP%2FAPP.comPonent.ts)

STEPS To Reproduce

1. Open the [ng-alain document] (https://ng-alain.com/theme/modal/zh) page
2. Roll to code demonstration
3. Click the Open/Static button to see the effect

What is exfected?

Model frame display in the middle

What is actually happy?

The modal frame is displayed in the upper left corner and a rolling bar appears

| ENVIRONMENT | Info |
| --- | --- | |
| ng-alain | 14.1.0 |
| Browser | 360 Security Browser 13 |

[snowchenlei]

This problem should be caused by 360 Secure Browser not supporting inset attributes

[snowchenlei]

尝试在 https://ng.ant.design/components/modal/en 是否也一样，若是的话，只能你自己写样式覆盖，因为我所了解好像 360浏览器 并不是支持环境之类。

ng-zorro是可以的，因为他没有使用inset这个css属性，还是用的之前的left,top这些

/*ng-zorro*/
.ant-modal-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}
/*ng-alain*/
.ant-modal-wrap {
    position: fixed;
    inset: 0;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}

[cipchk]

尝试了创建一个新的 angular 项目，也会自动转化成 inset：

/* style.less */
/* You can add global styles to this file, and also import other style files */
body {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

ng b 以后也会变成：

body{position:relative;inset:0}

看起来像是postcss某个插件更新版本引起，但我尝试找不到是哪里；为何 NG-ZORRO 没有，估计发布至今已经过好几个星期了。

[snowchenlei]

我现在是直接修改发布后的style.css解决的

[ousc]

ng-zorro官网也同样存在这个问题，360浏览器为了兼容，使用了86版本的chrome内核，似乎不支持inset属性，导致了这个问题。
比较难受的是有些用户还在使用XP系统，360浏览器是他们唯一的选择😂

是否有配置可以防止这个css属性的转换

[snowchenlei]

ng-zorro官网也同样存在这个问题，360浏览器为了兼容，使用了86版本的chrome内核，似乎不支持inset属性，导致了这个问题。 比较难受的是有些用户还在使用XP系统，360浏览器是他们唯一的选择😂

是有有配置可以防止这个css属性的转换

我用360访问ng-zorro官网是正常的。怎么配置？？

[ousc]

ng-zorro官网也同样存在这个问题，360浏览器为了兼容，使用了86版本的chrome内核，似乎不支持inset属性，导致了这个问题。 比较难受的是有些用户还在使用XP系统，360浏览器是他们唯一的选择😂
是有有配置可以防止这个css属性的转换

我用360访问ng-zorro官网是正常的。怎么配置？？

下面的这个截图用的是360极速，在mac和windows下都有此问题，360我再试下

[snowchenlei]

ng-zorro官网也同样存在这个问题，360浏览器为了兼容，使用了86版本的chrome内核，似乎不支持inset属性，导致了这个问题。 比较难受的是有些用户还在使用XP系统，360浏览器是他们唯一的选择😂
是有有配置可以防止这个css属性的转换

我用360访问ng-zorro官网是正常的。怎么配置？？

下面的这个截图用的是360极速，在mac和windows下都有此问题，360我再试下

ng-zorro最近升级的14.1。14.1版本是有问题的，14.0确是正常的

[ousc]

360也同样不行，我目前的解决办法是，在打包完后使用脚本将style.css内所有inset:0;全部替换成top: 0;right: 0;bottom: 0;left: 0;

[snowchenlei]

@ousc 你版本切到14.0看一下，是正常的。
我现在就是这么解决的，没找到好的解决办法

[ousc]

我查看了ng-zorro 14.0.0-14.1.0的package.json变动，好像没有人手动修改过相关的配置，可能是有某个依赖有小版本号的更新造成的，这个可能要有空再仔细分析一下

[ousc]

@ousc 你版本切到14.0看一下，是正常的。
我现在就是这么解决的，没找到好的解决办法

谢谢你的解决方案，不过14.1.0解决了几个很重要的问题，目前我们还不能回退

[snowchenlei]

回退也没用，ng-alain14版本都是不支持的。除非没用ng-alain，直接用的ng-zorro。
——————————————————————————————————————————————————————
@ousc
修改发布后的style.css可能会有一个问题，我不知道这是不是概率问题。
我刚发布之后修改了style.XXX.css，问题解决了。但是过2天后客户又反馈说显示异常了，我上线看了下，生成了一个新的style.XXX.css文件，之前那个文件好像没用了，如果没有手动修改就不存在生成新的。我又修改了新的，又正常了，等两天看下可会在生成新的style.XXX.css文件了。你也可以关注一下这个

[cipchk]

@ousc 这个问题应该是postcss某插件引起的，在不确定是什么插件引起时，的确只能在 ng b 后写一个 NODE 来做替换。

最近在 ANTD 也有类似的情况，ant-design/ant-design#37905

cc @snowchenlei 希望可以直接贴出替换代码。

[EnochGao]

直接在.browserslistrc文件中加上兼容chrome 86版本就行，ng14可以支持