Chrome 106新版本拖拽元素导致页面渲染空白问题

背景：

用户将Chrome浏览器升级到106版本（截止20221010号的最新版本），发现原本的拖拽模块拖拽后页面空白。经验证同样问题发生在Edge上；

可稳定复现版本：

• MAC Chrome：106.0.5249.103 (Official Build) (arm64)、 106.0.5249.103（正式版本） (x86_64)
• WIN Edge：版本 106.0.5249.103（正式版本）（64 位）

---

问题描述：

使用js原生的 drag与 drop方法写的拖拽组件，谷歌浏览器升级106版本之后，拖拽后页面空白。

---

原因分析：

Step1：开始查看是否为代码兼容问题，通过复查发现可视化配置模块的拖拽功能使用的是js原生的 drag和 drop方法，暂且排除代码问题；
Step2：认为是谷歌浏览器版本问题所致，并尝试升级谷歌浏览器，后发现升级至106版本后可以稳定复现此问题（windows电脑自带的Edge浏览器也同样会出现该问题），并且未升级106版本的其他同学不会出现该问题；
Step3：开始寻找出现相似情况的文章（附在该文最后，有兴趣的同学可自行浏览关注后续～）；因为系统内还存在同样有拖拽功能的其他模块，所以与此同时进行其他模块的检查，但其他拖拽功能使用的是 react-dnd，未受此次升级影响，于是查看该插件源码，看是否也是使用js的 drag和 drop，以及为何不受影响；
Step4：尝试不同的解决方式。

---

解决方案：

1. 谷歌浏览器升级至107beta版本，发现问题解决（由此可见106出现的问题不是代码兼容问题所致）；
2. 与react-dnd源码比较，发现它并未使用js的drag和drop，所以无法从此处下手解决问题，除非重写出现问题的模块，但工作量巨大，不现实；
3. Chromium问题中记载了该问题的解决方案（参考链接1-Chromium的讨论）：在拖拽元素的父元素中添加以下样式作为修复，亲测有效。

transform: translate(0, 0);
z-index: 0;

4. 另外，Chromium在后面的v107正式版本会修复这个问题；

---

总结：

最后选择加上该样式在拖拽元素的div上，官方解决问题的答复中认为即便是不出现该错误也应该加上该样式，因为我们从最近的堆叠上下文中绘制拖动图像，并且如果可拖动元素不是堆叠上下文，则拖动图像可能包含包含堆叠上下文下的其他内容。

---

附录：

• 链接1-Chromium 社区bug trace：https://bugs.chromium.org/p/chromium/issues/detail?id=1370030&sort=-modified%20-opened%20target&q=drag&can=1
• 链接2-其他网站更新出现的类似问题
  • IFS：https://community.ifs.com/field-service-management-fsm-planning-and-scheduling-optimization-pso-249/drag-and-drop-in-schedule-board-is-not-supported-in-latest-versions-of-chrome-and-edge-27289
  • https://stackoverflow.com/questions/73986554/chrome-problem-during-a-drag-operation-when-it-is-included-in-two-absolutely-po?newreg=9f2c7ec889be4d019e0273c800e2c5fa
  • https://udacity.zendesk.com/hc/en-us/community/posts/9679591011597
  • https://stackoverflow.com/questions/73972272/google-chrome-106-draggable-causing-elements-to-disappear