Next.js+Tailwind CSS快速滚动/页面更新时布局错乱问题求助

我们在快速滚动页面或页面更新时遇到布局错乱问题（DOM中无重复元素，仅为布局层面异常）。我们分别用Next.js+Tailwind CSS和Next.js+常规CSS实现了完全相同的布局，该问题仅出现在使用Tailwind CSS的项目中，且只在极少数设备上能复现。

相关资源 #

• 问题视频记录：已录制问题发生过程的视频
• 演示页面：
  • 使用Tailwind的版本：对应演示页面
  • 未使用Tailwind的版本：对应演示页面
• GitHub代码仓库：存放问题复现Demo的仓库
• 布局错乱截图：已提供问题发生时的布局截图

注意事项 #

布局错乱问题不限于SVG牙齿图表，会随机出现在页面任意元素上，且全站所有页面都存在此问题，仅提供示例页面用于演示。

环境信息 #

• Tailwind CSS版本：3.4.1
• 出现问题的设备详情：
  • 设备型号：OnePlus Nord CE2 (IV2201)
  • Android系统版本：13（Oxygen OS 13）
  • 屏幕尺寸：6.43英寸
  • 浏览器版本：Chrome 122.0.6261.90

排查情况 #

我们尝试通过Chrome调试工具检查移动端代码，但DOM结构完全正常，没有体现出布局错乱的相关变化。由于问题仅在极少数设备上出现，调试难度极大。另外，我们移除了牙齿图表及其他常出现错乱的元素，但问题仍会转移到其他元素上发生。

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