TradingView Lightweight Charts 在 Arc 浏览器中切换标签页导致图表消失问题分析

问题现象

近期有用户报告，在使用 Arc 浏览器时，TradingView Lightweight Charts 图表在切换浏览器标签页后会出现消失的情况。该问题不仅出现在用户自己的应用中，甚至在官方演示页面上也能复现。类似现象在 Chrome 浏览器中也有出现，但频率较低。

问题根源

经过技术分析，这个问题实际上是 Chromium 内核的一个已知 bug。当浏览器标签页被切换时，Canvas 元素的绘图上下文状态可能会丢失，导致图表无法正常渲染。这个问题主要影响基于 Chromium 的浏览器，包括 Chrome 和 Arc 等。

临时解决方案

在 Chromium 官方修复完全推送之前，开发者可以采用以下两种临时解决方案：

1. 手动触发 Canvas 重绘： 通过监听页面的 visibilitychange 事件，在标签页重新激活时强制 Canvas 元素执行一次绘制操作。这种方法可以"唤醒"Canvas 的渲染能力。

2. 调用图表重新应用配置： 更简单的方法是直接调用图表的 applyOptions 方法，传入空对象参数。这会触发图表内部的重绘机制，恢复显示。

长期解决方案

Chromium 团队已经确认了这个问题，并正在通过两种方式推送修复：

1. 服务器端配置的逐步推送，用户只需重启浏览器即可获得修复
2. 该修复将被反向移植到 Chrome 125 和 126 版本中

这意味着随着浏览器版本的更新，这个问题将自然得到解决，开发者无需长期维护特殊的修复代码。

技术启示

这个案例展示了浏览器兼容性问题的一个典型模式：当底层渲染引擎出现问题时，上层应用可以采取临时规避措施，但最终解决方案仍需依赖引擎本身的修复。对于金融图表这类对可视化要求高的应用，开发者需要特别关注 Canvas 和 WebGL 相关的浏览器兼容性问题。

建议开发者在遇到类似问题时，首先检查是否是浏览器内核的已知问题，然后根据业务需求决定采用临时解决方案还是等待浏览器更新。同时，保持对浏览器版本变更的关注，及时移除不再需要的兼容性代码。