iOS 15 把 AntV G2 搞挂了～

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1148 天前的主题，其中的信息可能已经有所发展或是发生改变。

原文地址： https://www.yuque.com/antv/g2plot/trqnha

iOS 15 9 月 20 日发布，同步携带 Safari 15，国内用户在 21 号凌晨收到升级推送，在第二天 22 号，就收到 issue 反馈，G2 在新版本全部挂了。 #3635

这个 safari 版本的配色，和 AntV 的官网整体配色毫无违和感。

卡死的问题

没有任何报错，没有任何额外信息，就是卡死浏览器，导致页面崩溃。只好一行一行代码的断点，从 G2 到 G 一两万行代码，以及直觉断了大概 2h，终于定位到最后的一行代码。然后通过看 context 、text 等信息，最终排查到问题在于：**在 iOS 15 canvas 中绘制中文，如果使用 -apple-system 字体，直接卡死，而 G2 内置主题字体使用的 -apple-system 。**

最小复现 DEMO：

const canvas = document.getElementById('container');
const context = canvas.getContext('2d');
context.font = '20px -apple-system';
context.fillText('绘制中文', 0, 0); // 使用该字体绘制中文会出现问题

先不管为什么，先解决问题再说 #3640。

-apple-system 字体问题

-apple-system 这个字体从 G2 2.x 开始就作为内置主题的默认字体，所以这个问题影响到所有 G2 的版本。很奇怪，这个究竟是什么字体？为啥那么早就内置了，而实际 google 搜索，并不能搜到这个字体。

所以，我猜测大概率是：设计师的设计软件，在直接导出样式的时候，fontFamily 包含有这个字符串，这个字符串只是一个占位符，代表当前苹果系统的字体。

如果是这样的话，上述复现 DEMO 中改成任意一个 xxx 不存在的字体，理论上同样可以复现。如果是这样的话，那 iOS 的这个 bug 就很严重了，如果使用不存在的字体在 Canvas 上绘制文本，就会卡死浏览器。

测试结果，竟然是不会。那如果这样的话，意思就是 -apple-system 这个字体名称确实有他的含义，并且 iOS 系统对他也确实有额外的处理，导致了渲染卡死。

下一步，理论上就是应该到 iOS 的源代码中去看对 -apple-system 字体的处理逻辑了。到这里就不好意思了，能力太差，无法深入到操作系统底层去排查，有相关经验的，可以进去走下。

Safari 15 的正则解析

这个问题，直接导致 AntV 的所有官网在 Safari 15 中都打不开，这段正则在 chrome 上解析正常，但是在 Safari 15 是一个不合法的正则，出现在 normalize-url 这个包中，最新版本的 7.x 已经修复，但是狗血的是，5.x 后的版本仅支持 node 环境，所以这个问题，目前只能锁定 4.x 版本解决。