Google Chrome渲染问题：.png精灵表偶发从网页消失

同类问题确认 #

确实有不少开发者在Chrome近6个月更新的版本中遇到过类似场景的精灵表渲染异常——标签页切换或后台恢复后，PNG精灵图标随机消失，需刷新才能恢复，属于Chrome渲染引擎的偶发Bug。

可尝试的临时修复方案 #

• 强制触发重绘：监听页面visibilitychange事件，在标签页激活时通过微小样式变更强制浏览器重绘精灵表区域。示例代码：

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
      document.querySelectorAll('.sprite-container').forEach(el => {
        el.style.transform = 'translateZ(0)';
        requestAnimationFrame(() => {
          el.style.transform = '';
        });
      });
    }
  });
  

• 优化资源加载优先级：给出现问题的第4、5号精灵表图片添加fetchpriority="high"属性，提前预加载资源，降低浏览器后台缓存回收概率：

  <img src="/path/to/sprite-4.png" style="display: none;" fetchpriority="high">
  <img src="/path/to/sprite-5.png" style="display: none;" fetchpriority="high">
  

• 调整浏览器设置：建议受影响用户关闭Chrome的「节能模式」（路径：设置 → 性能 → 节能模式），部分用户反馈此操作可大幅降低问题出现频率。

SVG迁移的轻量化方案 #

如果最终需要替换PNG精灵表，无需一次性全量迁移：

• 优先将高频使用的图标转为SVG sprite，逐步替换
• 利用工具批量转换PNG为SVG（注意手动校验图标精度），减少重复工作量

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