基于React Creative Tim MUI Dashboard的模态框在iOS Safari不可见问题

• 排查backdrop-filter属性兼容性问题
  Creative Tim Material UI Dashboard 组件默认可能为模态框遮罩/容器配置了backdrop-filter: blur()属性，部分版本iOS Safari对该属性的兼容性存在缺陷，若同时搭配opacity、transform属性使用，容易触发渲染Bug导致元素完全透明不可见，可临时注释该属性验证是否恢复显示。
• 验证transform动画相关的渲染异常
  检查模态框是否配置了入场/出场的translate、scale类动画，iOS Safari对fixed定位元素叠加transform动画的场景存在偶发的离屏渲染Bug，可尝试临时取消动画，或给模态框根节点添加transform: translateZ(0)强制触发GPU渲染验证效果。
• 检查visibility、color-scheme属性冲突
  若项目做了深色模式适配，需排查根节点配置的color-scheme属性是否和模态框组件的颜色逻辑冲突，导致内容色值与背景完全重合；同时检查模态框的上层节点是否被意外设置了visibility: hidden，若子节点单独设置了visibility: visible，会出现可交互但视觉不可见的异常。
• 排查React Portal挂载逻辑问题
  确认模态框对应的Portal组件挂载节点是否为body直接子节点，若挂载到存在渲染异常的自定义父节点上，可能触发Safari的层级渲染Bug，可修改挂载目标为body根节点验证；若使用React 18，可给模态框根节点添加随机key强制重渲染，排除自动批处理导致的样式更新失效问题。
• 测试will-change属性的影响
  若模态框相关样式配置了will-change: opacity、will-change: transform类属性，部分iOS Safari版本会将元素标记为待变更状态，出现偶发的不渲染问题，可临时删除所有will-change属性验证。

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