ReactJS开发的叠层模态框在OSX系统Firefox中出现渲染绘制异常问题

匹配的问题特征 #

这类仅在macOS系统Firefox上复现、DOM结构无实际移除、鼠标悬停后消失区域自动恢复显示的表现，属于浏览器合成层渲染的已知类异常，和React的业务渲染逻辑无直接关联。

常见触发诱因 #

• 多层叠放的模态框在切换激活层级时，会频繁触发z-index值动态变更，多次点击操作引发的层级重排，会导致Firefox的GPU合成器丢失对应元素的栅格化缓存，出现无DOM结构变更的视觉层丢失
• 模态框使用了backdrop-filter、半透明背景、transform等需走独立合成管线的属性，多次重绘后Metal后端的绘制逻辑出现偶发跳过，造成部分区域不渲染
• 模态框未形成独立层叠上下文时，和后方普通页面元素共享绘制层，层合并过程中偶发丢失模态框对应的绘制分片，最终出现可穿透看到后方内容的表现

可落地修复方案 #

• 给模态框根节点添加isolation: isolate，强制其形成独立的层叠上下文，避免和后方页面元素的合成层合并
• 给模态框根节点补充transform: translateZ(0)，强制为其分配独立GPU合成层，减少层缓存失效的概率
• 如果模态框使用了毛玻璃效果的backdrop-filter，不要将该属性和动态修改的z-index值做无过渡切换，可搭配极短的CSS过渡（如transition: z-index 10ms）平滑变更，减少合成层的频繁销毁与重建
• 临时兜底逻辑：在模态框区域的点击事件回调完成后，临时切换一次模态框元素的will-change属性值，强制浏览器提交一次完整绘制帧，触发对应区域的重绘

快速排查验证 #

• 进入Firefox设置关闭硬件加速功能，重启浏览器后测试问题是否消失，即可确认是否为GPU渲染管线的异常
• 在其他操作系统的Firefox上运行相同页面逻辑，验证复现范围，确认问题仅存在于macOS版本的渲染管线

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