React DOM Reconciliation结合Intersection Observer异常：Chrome/Edge存在Bug

更新：这是Chrome和Edge中的Bug，代码在Firefox中可正常运行。

基于数组渲染组件后对数组重排，会导致Intersection Observer无法正确识别当前处于viewport中的元素……这或许是React DOM reconciliation的问题？

复现步骤 #

• 向下滚动使box 4和（至少部分可见的）box 5处于viewport内。
• 点击页面左上角的REORDER按钮，这会交换box 4和box 8，此时box 8进入viewport，box 4移出。
• 你会发现box 5变为goldenrod色，这意味着它被判定为不在viewport内（通过添加类来改变背景色）。
• 你还可以继续滚动至box 4位于页面顶部，点击“REORDER”后会看到box 4之后的所有box都变为goldenrod色，再次表明它们被判定为不在viewport内。

这是怎么回事？

我已向React团队提交Bug报告。

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