MS Edge中SVG的foreignObject子内容滚动后渲染异常如何解决？

你遇到的是Chromium 96内核版本的已知渲染缺陷，Edge 96基于该版本内核构建，批量渲染foreignObject子元素时滚动重绘逻辑存在迭代中断问题，可尝试以下方案修复：

• 给所有foreignObject元素添加强制分层渲染的CSS属性，触发独立合成层避免渲染队列丢失，可选属性：

  foreignObject {
    will-change: transform;
    /* 或者用transform: translateZ(0); 效果一致 */
  }
  

• 显式声明所有foreignObject的width、height属性，不要使用百分比、auto等动态计算值，避免滚动重计算时尺寸解析出错导致元素被判定为不可见。
• 监听页面滚动事件，主动触发重绘逻辑：滚动触发时给foreignObject节点临时添加一次无关样式修改后立即还原，比如交替修改opacity: 0.99再改回1，或者主动调用getBoundingClientRect()强制触发重排。
• 若单个SVG内foreignObject数量过多，可将多个foreignObject拆分到多个独立的SVG节点中分别渲染，减少单次渲染的子元素数量，避开渲染迭代次数阈值。
• 降级兼容方案：检测到当前为Edge 96版本时，将foreignObject内的HTML内容抽离为独立的绝对定位元素，覆盖在SVG对应坐标位置上，完全绕过SVG的foreignObject渲染逻辑。

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