V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
50vip
V2EX  ›  分享发现

iOS 15 把 AntV G2 搞挂了~

  •  1
     
  •   50vip · 2021-09-26 16:54:28 +08:00 · 2924 次点击
    这是一个创建于 1154 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    image.png

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

    卡死的问题

    image.png

    没有任何报错,没有任何额外信息,就是卡死浏览器, 导致页面崩溃。只好一行一行代码的断点,从 G2 到 G 一两万行代码,以及直觉断了大概 2h,终于定位到最后的一行代码。 image.png 然后通过看 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。 ​

    image.png

    -apple-system 字体问题

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

    image.png

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

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

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

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

    Safari 15 的正则解析

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

    第 1 条附言  ·  2021-09-26 17:56:36 +08:00

    经过网友指正,“-” 是搜索引擎的关键词,所以没有搜索到。重新搜索得到这篇文章。 ​

    fontFamlily 中的 system-ui 是指系统当前默认的字体,这个规范,而实际规范实施的时候呢,考虑到不同平台及向后兼容,在 macOS 和 iOS 上,我们需要使用 -apple-system 及 BlinkMacSystemFont来兼容适配 system-ui 标准。

    第 2 条附言  ·  2021-09-27 09:55:41 +08:00

    欢迎关注我们的公众号,会定期更新技术文章,以及可视化相关内容。

    wechat

    12 条回复    2021-09-26 19:25:13 +08:00
    clf
        1
    clf  
       2021-09-26 17:00:12 +08:00
    一般移动端用 antv f2 。

    (我们的 G2 也翻车了,然后解决方案是直接更新成 F2.)
    fe619742721
        2
    fe619742721  
       2021-09-26 17:01:18 +08:00
    有意思,想了解下怎么 debug 定位到的
    clf
        3
    clf  
       2021-09-26 17:03:02 +08:00
    而且不止是 safari,包括钉钉内集成的 H5 、企业微信里集成的 H5 都崩溃了。
    mzlzero
        4
    mzlzero  
       2021-09-26 17:04:09 +08:00
    断点二分法是不是更快,不用一行一行断
    ss098
        5
    ss098  
       2021-09-26 17:05:10 +08:00
    查不到 -apple-system 是因为减号是 Google 的过滤语法,搜索 apple-system font 就可以了。
    50vip
        6
    50vip  
    OP
       2021-09-26 17:45:06 +08:00
    @ss098
    50vip
        7
    50vip  
    OP
       2021-09-26 17:45:46 +08:00
    @mzlzero 我是按照调用栈,树形打点,也是挺快的,只不过层级太深了。。。
    50vip
        8
    50vip  
    OP
       2021-09-26 17:46:53 +08:00
    @ss098 学习了,看来我的内容要重新更新一下。
    50vip
        9
    50vip  
    OP
       2021-09-26 17:48:41 +08:00
    @lychs1998 G2 升级一下就可以了,官方已经修复了。
    50vip
        10
    50vip  
    OP
       2021-09-26 17:49:17 +08:00
    @fe619742721 一直断点
    anguiao
        11
    anguiao  
       2021-09-26 18:03:02 +08:00   ❤️ 1
    可以搜“\-apple-system”,这样就能搜到了,其他类似的情况也可以这么处理。
    find456789
        12
    find456789  
       2021-09-26 19:25:13 +08:00
    希望有大神可以分享下, 排查这种错误的思路,方法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1325 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:49 · PVG 01:49 · LAX 09:49 · JFK 12:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.