关于微信小程序fixed在IOS上显示的错位的问题

问题现象

在安卓上fixed正常生效，但在ios上二维码遮罩弹窗一直这样错位显示（如下图）

问题原因

 结合GPT分析了一下得到

fixed 元素相对于最近的具有滚动容器的祖先元素固定，则找到该滚动元素并将其用作固定元素的祖先元素。

而在我的页面元素中存在多个滚动条，那么此时使用fixed，也就是相对于我第一个滚动容器也就是最右边内容作为父元素。

解决方式

微信官方提供了 

root-portal

 

组件文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html

加在自己的组件外面

<root-portal>
  <!-- ....组件内容或页面元素 -->
</root-portal>

最后效果