Tencent / wujie

极致的微前端框架
https://wujie-micro.github.io/doc/
Other
4.12k stars 590 forks source link

谷歌浏览器升级111版本后,所有子应用的全屏弹窗都失效 #455

Closed Wenbile closed 1 year ago

Wenbile commented 1 year ago

描述bug 谷歌浏览器升级111版本后,wuejie-vue3版本为1.0.8,所有子应用的全屏弹窗都失效

如何复现 给出详细的复现步骤 1、升级谷歌浏览器到111 2、 选择主应用中任意子应用,打开全局弹窗

Wenbile commented 1 year ago

在子应用html里加position: fixed; z-index: 999;之后,全局弹窗正常了,但是页面宽度异常,没有什么修改的思路了,还麻烦麻烦官方给出解决方案

RyzenPan commented 1 year ago

这样设置也不太行,会导致很多元素位置错乱

在子应用html里加position: fixed; z-index: 999;之后,全局弹窗正常了,但是页面宽度异常,没有什么修改的思路了,还麻烦麻烦官方给出解决方案

yiludege commented 1 year ago

目前测试了一下,确定了确实是chrome110 版本对shadowdom的修改导致的,之前是没有这个问题,

在算z-index层级的时候,shadowdom 里面的 z-index 再高,似乎只在 shadowdom里面生效,除非shadowdom的根节点比外面的层级高,否则里面的层级怎么都不会比外面的高

非shadowdom也没有这个问题,可能需要在主应用将wujie-app的层级提高才能解决目前遮挡的问题。

但是将wujie-app 层级提高又可能和主应用的 menu和header区域发生重叠,现在这种情况确实很难处理。

Wenbile commented 1 year ago

子应用HTML中添加view-transition-name: none