Angular12：micro-app组件在父元素设置了transform: translate3d(100px, 0px, 0px)后，ng-zorro的弹窗组件无法覆盖全局，而是在父元素里

[zzhimin]

问题描述

Angular12：micro-app组件在父元素设置了transform: translate3d(100px, 0px, 0px)后，ng-zorro的弹窗组件无法覆盖全局，而是在父元素里

复现步骤

1.按照官方文档搭建一个base和app1两个Angular12的项目 2.在base项目使用micro-app组件，并在其父元素设置style属性：transform: translate3d(100px, 0px, 0px);。就会出现ng-zorro弹窗组件无法全屏的问题

上传截图

未增加[style](transform: translate3d)属性：

增加[style](transform: translate3d)属性：

demo

https://github.com/zzhimin/micro-app-angular12-demo.git

问题定位

查看release：1.0.0-alpha.2更新的fixbug：修复了ant-design-vue的弹窗类组件及其它特殊情况下，子应用元素逃逸到原生body上的问题。应该是proxyDocument导致的。

环境信息

• micro-app版本：1.0.0-rc.3
• 主应用前端框架&版本："@angular/core": "~12.2.0",
• 子应用前端框架&版本："@angular/core": "~12.2.0",
• 构建工具&版本：angular-cli：12.2.6

[tinymins]

请问下问题点在哪里，看了下都是符合预期的

[tinymins]

推测是在描述 transform 引起 position: fixed 表现降级为 absolute 的问题，这个是 CSS3 的知识，可以看看 CSS3 transform对普通元素的N多渲染影响：三、transform限制position:fixed的跟随效果

[zzhimin]

请问下问题点在哪里，看了下都是符合预期的

就是不太清楚啊。需要官方人员解决一下，困扰我很久了

[bailicangdu]

请问下问题点在哪里，看了下都是符合预期的

就是不太清楚啊。需要官方人员解决一下，困扰我很久了

由于给micro-app元素加了transform，导致micro-app内部元素，也就是弹窗的position:fixed降级成position:absolute，从而无法覆盖全局

[zzhimin]

请问下问题点在哪里，看了下都是符合预期的

就是不太清楚啊。需要官方人员解决一下，困扰我很久了

由于给micro-app元素加了transform，导致micro-app内部元素，也就是弹窗的position:fixed降级成position:absolute，从而无法覆盖全局

@bailicangdu @tinymins 感谢两位大佬的耐心回复，把问题定位到了。我现在的需求是transform: translate3d必须要设置，因为项目使用了angular-gridster2这个库，而我是将子应用当做angular-gridster2的一个组件使用，它布局是基于transform: translate3d的。所以就会出现这个问题（所有动态生成的都会有这个问题如select下拉框等），希望两位大佬帮忙看一下。

[bailicangdu]

@zzhimin 之前弹窗元素逃逸出micro-app是一个bug，反而导致可以正常运行，如今我们修复了逃逸的问题，这种样式冲突问题需要自行解决了