Chakra UI应用在常用Chrome配置文件下渲染异常问题咨询

• 基于MERN栈开发的项目前端使用Chakra UI组件库，出现渲染异常：Firefox浏览器内页面显示完全正常，Chrome浏览器下渲染效果错乱。
• 效果对比：
  • Chrome异常渲染效果：
  • Firefox正常渲染效果：
• 已排查验证的信息：
  • Chrome无痕模式下页面渲染完全正常
  • 切换其他不常用Chrome配置文件打开页面，无渲染问题
  • 已经试过禁用当前常用Chrome配置文件下所有扩展、清除浏览器缓存，问题还是存在
  • 不想清空这个常用配置文件的全部数据，需要定位问题原因，给出可落地的修复方案

这个问题不是代码层面的兼容性bug，所有跨环境、跨配置文件的表现差异，都指向当前常用Chrome配置文件下的站点级持久化数据/本地配置冲突，常见触发原因有这几个：

• 站点级Service Worker旧缓存残留：普通清缓存的操作如果没覆盖Service Worker存储、站点独立存储分区，之前存的错误旧样式缓存会一直被加载；无痕模式默认不读持久化的Service Worker缓存，所以显示正常。
• Chakra UI持久化配置冲突：Chakra UI默认会把颜色模式、自定义主题配置存在站点localStorage里，如果之前调试的时候写了异常的配置值，会直接覆盖代码里定义的默认主题规则，导致样式计算错乱。
• Chrome实验性Flag配置冲突：如果当前配置文件手动开过CSS渲染、硬件加速、站点隔离相关的实验性功能，这些配置只对当前配置文件生效，无痕模式、其他配置文件默认用稳定版默认配置，所以不会出问题。
• 配置文件级硬件加速渲染异常：当前配置文件的GPU渲染配置出问题时，会触发Chakra用的CSS-in-JS方案渲染层计算错误，导致样式错位。

按顺序操作就行，每做完一步刷新开发页面验证是否恢复：

1. 精准清除开发站点的独立数据
   打开本地开发服务页面，点地址栏左边的站点设置图标（锁形/感叹号标识），进「站点设置」，点「清除数据」确认就可以。这个操作只会清当前开发域名下的Cookie、本地存储、缓存数据，不会影响其他网站的登录态、存的配置。
2. 手动清理Chakra相关的持久化配置
   在开发页面按F12打开开发者工具，切到「Application」面板：
   • 依次展开左边的「Local Storage」「Session Storage」「IndexedDB」目录，删掉当前开发域名下的所有存储条目，重点删key里带chakra-ui-color-mode、chakra-ui-storage的配置项
   • 展开左边「Service Workers」目录，点对应站点的「Unregister」按钮，把所有残留的服务工作线程都注销掉
3. 重置Chrome实验性配置
   地址栏输chrome://flags进实验性功能页面，点页面顶部的「Reset all」按钮把所有实验项恢复成默认值，重启Chrome再验证。如果不想重置全部实验项，可以单独确认CSS Container Queries、Hardware-accelerated CSS、Back-forward Cache这三个配置项是Default状态。
4. 排查硬件加速冲突
   进Chrome设置-系统页面，临时关掉「使用硬件加速（如果可用）」选项，重启Chrome再验证。如果页面恢复正常，可以重新开硬件加速，把电脑显卡驱动更新到最新版本，就能解决长期的渲染冲突问题。

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