iOS 15 把 AntV G2 搞挂了~

2021-09-26 16:54:28 +08:00
 50vip

原文地址: 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 版本解决。 ​

2909 次点击
所在节点    分享发现
12 条回复
clf
2021-09-26 17:00:12 +08:00
一般移动端用 antv f2 。

(我们的 G2 也翻车了,然后解决方案是直接更新成 F2.)
fe619742721
2021-09-26 17:01:18 +08:00
有意思,想了解下怎么 debug 定位到的
clf
2021-09-26 17:03:02 +08:00
而且不止是 safari,包括钉钉内集成的 H5 、企业微信里集成的 H5 都崩溃了。
mzlzero
2021-09-26 17:04:09 +08:00
断点二分法是不是更快,不用一行一行断
ss098
2021-09-26 17:05:10 +08:00
查不到 -apple-system 是因为减号是 Google 的过滤语法,搜索 apple-system font 就可以了。
50vip
2021-09-26 17:45:06 +08:00
@ss098
50vip
2021-09-26 17:45:46 +08:00
@mzlzero 我是按照调用栈,树形打点,也是挺快的,只不过层级太深了。。。
50vip
2021-09-26 17:46:53 +08:00
@ss098 学习了,看来我的内容要重新更新一下。
50vip
2021-09-26 17:48:41 +08:00
@lychs1998 G2 升级一下就可以了,官方已经修复了。
50vip
2021-09-26 17:49:17 +08:00
@fe619742721 一直断点
anguiao
2021-09-26 18:03:02 +08:00
可以搜“\-apple-system”,这样就能搜到了,其他类似的情况也可以这么处理。
find456789
2021-09-26 19:25:13 +08:00
希望有大神可以分享下, 排查这种错误的思路,方法

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/804413

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX