iOS15 Safari浏览器下Material UI Dialog底部出现黑色空白问题

iOS15对Safari的视口计算逻辑做了调整，底部新增的可折叠虚拟工具栏会导致vh单位计算值和实际可视区域高度不符，Material UI v4.11的Dialog组件默认依赖vh做固定定位和高度计算，同时组件自带的滚动锁定逻辑在iOS15 Safari下会触发视口高度重排，最终在页面底部产生异常黑色空白区域。

• 方案1：全局适配CSS视口高度
  给项目全局样式添加如下代码，适配iOS Safari的动态视口高度：

  html, body {
    height: 100%;
    height: -webkit-fill-available;
  }
  /* 适配MUI Dialog根节点高度 */
  .MuiDialog-root {
    min-height: 100vh; /* 兼容低版本浏览器 */
    min-height: 100dvh; /* 适配iOS15+动态视口高度 */
  }
  

• 方案2：调整Dialog组件的滚动锁定配置
  给调用的Dialog组件添加disableScrollLock={true}属性，关闭组件自带的滚动锁定逻辑，自行实现适配iOS的滚动锁定：

  <Dialog
    disableScrollLock={true}
    // 保留其余原有配置不变
  >
    {/* 原有模态框内容 */}
  </Dialog>
  

  配套的自定义滚动锁定逻辑可以在Dialog打开时给body添加position: fixed; width: 100%;样式，关闭时移除该样式，既可以阻止底层页面滚动，也不会触发视口高度重算。
• 方案3：升级Material UI依赖版本
  如果项目兼容允许，可将Material UI升级到v4.12.0及以上版本，该版本已官方适配iOS15 Safari的视口特性，无需额外修改代码即可解决该异常。

内容的提问来源于stack exchange，提问作者GOVARDHANAN S L