如何防止Material-UI Popover打开时触发iFrame滚动位置跳变？

安全阿岳

2026-8-26

问题背景

基于MaterialUI开发、通过iFrame嵌入第三方页面的应用，在渲染Popover类组件（MUI原生的select、menu组件均基于Popover实现）时，Popover打开瞬间iFrame会出现滚动、位置跳变问题。

复现环境：Chrome、Firefox浏览器可稳定复现，Safari无该异常
复现步骤：
1. 滚动父页面，将iFrame滚动至离开视口顶部的位置
2. 点击页面内的Popover触发按钮，或是页面上的溢出类菜单，即可触发跳变
复现用测试页面代码：

<!doctype html>
<html lang="en">
    <body style="margin: 0;">
        <div style="height: 1000px;"></div>
        <iframe src="目标MUI应用地址" style="border: 0; width: 100vw; height: 100vh;"></iframe>
        <div style="height: 1000px;"></div>
    </body>
</html>

已验证无效的方案：
- 将Popover的过渡组件从Grow替换为Fade，无修复效果
已知限制：
- Popper组件无同类问题，但替换Popover需要fork组件库、完成全量应用重测，改造成本过高无法落地
- 该问题在所有已发布的MUI版本中均存在
- 初步定位问题出在Popover的定位计算逻辑中

根因定位

跳变的核心原因不是定位计算错误，而是Popover打开时的默认行为：组件会在渲染完成后自动将焦点移动到弹出层根节点，Chrome、Firefox对跨iframe场景下的焦点元素，会默认执行滚动对齐逻辑，自动滚动父页面把焦点所在的iframe区域拉到可视范围内，最终表现为页面跳变。

修复方案（无需替换组件、无需fork MUI源码）

以下方案可根据项目实际情况组合使用，改造成本极低：

方案1：禁用Popover自动聚焦（成本最低）
给所有Popover、Select、Menu类基于Popover封装的组件传入disableAutoFocus={true}属性，阻止Popover打开时强制把焦点移到弹出层，从根源避免触发浏览器的默认滚动对齐。
注意：如果你的组件依赖打开时自动聚焦实现键盘导航（比如方向键选择菜单选项），不建议单独使用该方案，可搭配方案2使用。

方案2：全局拦截焦点触发的默认滚动
两步配置即可在不影响交互的前提下阻止跳变：

添加全局CSS，重置弹出层的滚动边距、限制滚动连锁：

.MuiPopover-root {
  scroll-margin-top: 0 !important;
  overscroll-behavior: contain;
}

在项目入口文件重写元素聚焦方法，强制Popover相关元素聚焦时禁用滚动：

const originFocus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function (options) {
  const config = typeof options === 'object' ? options : {};
  // 识别MUI弹出层元素，聚焦时强制阻止滚动
  if (this.classList?.contains('MuiPopover-root') || this.closest('.MuiPopover-root')) {
    return originFocus.call(this, { ...config, preventScroll: true });
  }
  return originFocus.call(this, options);
};

方案3：固定Popover挂载容器
通过MUI全局主题配置，给所有Popover组件默认注入container属性，强制弹出层挂载在当前iframe的body节点下，避免定位计算时跨窗口读取父页面滚动偏移量导致的计算误差：
```
// 主题配置示例
const theme = createTheme({
  components: {
    MuiPopover: {
      defaultProps: {
        container: document.body,
      },
    },
  },
});
```
该配置全局生效，不需要逐个修改业务组件。

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