Mac M1 Pro+Chrome v105中HTML5 Canvas元素显示不一致解决咨询

分步修复方案 #

• 升级Chrome至最新稳定版：你当前使用的v105版本较旧，后续版本针对Apple Silicon平台的GPU渲染兼容性有大量修复。通过Chrome菜单的「关于Google Chrome」入口完成自动更新，更新后重启浏览器。
• 重置GPU相关实验性设置：之前修改chrome://flags中的GPU/Canvas选项可能造成配置冲突。打开chrome://flags，点击页面顶部的「重置所有」按钮，重启后重新测试Canvas加载情况。
• 验证硬件加速兼容性：
  1. 进入Chrome设置，搜索「硬件加速」
  2. 取消勾选「使用硬件加速模式（如果可用）」
  3. 重启浏览器后测试所有问题站点
     若关闭后Canvas显示正常，说明当前Chrome版本与M1 Pro的GPU驱动存在适配问题，等待后续Chrome更新即可；若问题依旧，继续下一步。
• 清除站点缓存与数据：部分站点的本地缓存可能干扰Canvas渲染：
  1. 打开Chrome设置，搜索「清除浏览数据」
  2. 切换到「高级」标签，勾选「缓存的图片和文件」「站点数据」
  3. 时间范围选择「所有时间」，执行清除操作
• 创建全新用户配置文件：当前用户配置文件损坏可能导致渲染异常：
  1. 点击Chrome右上角用户头像，选择「添加」
  2. 创建不导入任何数据的新配置文件
  3. 在新配置文件下测试问题站点的Canvas显示

备选针对性调整 #

若上述通用方案无效，可在chrome://flags中将Canvas 2D rasterizer设置为「Enabled」，强制启用软件渲染路径，但优先推荐完成前面的通用修复步骤。

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