🐛 MacOS Chrome/100 以下版本，主题配置包含BlinkMacSystemFont字体时导致 页面崩溃

[db-shuai]




🏷 Version

Package	Version
@antv/s2	2.0.0-next.23
@antv/s2-react	-
@antv/s2-vue	2.0.0-next.14

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

主题配置中的字体配置 含有 BlinkMacSystemFont 字体时导致页面崩溃
macos系统 使用的 chrome版本低于100时，页面直接崩溃，已验证 windows 无此问题。
Chrome版本更新>100后无此问题，已验证版本（101、105、110、126）

⌨️ Code Snapshots

https://s2.antv.antgroup.com/examples/theme/default/#colorful ，此链接内使用如下配置

fetch(
  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
)
  .then((res) => res.json())
  .then(async (data) => {
    const container = document.getElementById('container');
    const s2DataConfig: S2DataConfig = {
      fields: {
        rows: ['province', 'city'],
        columns: ['type'],
        values: ['price', 'cost'],
      },
      meta: [
        {
          field: 'province',
          name: '省份',
        },
        {
          field: 'city',
          name: '城市',
        },
        {
          field: 'type',
          name: '商品类别',
        },
        {
          field: 'price',
          name: '价格',
        },
        {
          field: 'cost',
          name: '成本',
        },
      ],
      data,
    };

    const s2Options: S2Options = {
      width: 600,
      height: 480,
    };

    const s2 = new PivotSheet(container, s2DataConfig, s2Options);

    s2.setThemeCfg({ name: 'colorful',theme:{
      cornerCell:{
        text:{
          fontFamily: 'BlinkMacSystemFont',
        }
      }
    } });

    await s2.render();
  });

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

页面正常展示不要崩溃，

💻 System information

Environment	Info
System	Apple M1 MacOs 4.2.1 (23C71)
Browser	Chrome/99.xxxx
Chrome 96、97 、99 版本皆崩溃

[lijinke666]

Canvas 特定的字体下浏览器会卡死, 这是 Mac 和 iOS 系统的问题, 和 S2 没关系.

Chrome版本更新>100后无此问题，已验证版本（101、105、110、126）

没太懂既然 > 100 没问题, 为什么还要使用这么低的版本?

主题配置中的字体配置 含有 BlinkMacSystemFont 字体时导致页面崩溃

像 -apple-system BlinkMacSystemFont 之类的字体, 在 Canvas 中如果渲染了中文都会卡死, 在之前的 Mac 或 iOS 大版本更新都会遇到, 之前我们也遇到过 (能力有限, 崩溃的原因不得而知), 解决方式就是不使用相关字体 https://github.com/antvis/S2/pull/394/files

[db-shuai]

Canvas 特定的字体下浏览器会卡死, 这是 Mac 和 iOS 系统的问题, 和 S2 没关系.

Chrome版本更新>100后无此问题，已验证版本（101、105、110、126）

没太懂既然 > 100 没问题, 为什么还要使用这么低的版本?

主题配置中的字体配置 含有 BlinkMacSystemFont 字体时导致页面崩溃

像 -apple-system BlinkMacSystemFont 之类的字体, 在 Canvas 中如果渲染了中文都会卡死, 在之前的 Mac 或 iOS 大版本更新都会遇到, 之前我们也遇到过 (能力有限, 崩溃的原因不得而知), 解决方式就是不使用相关字体 https://github.com/antvis/S2/pull/394/files

S2默认不是也有 BlinkMacSystemFont 这个字体么， 为什么默认里没问题？
因为用户的版本 我们没有办法去限制，个别用户版本较低，然后出现了这个问题，才定位到这个问题

[lijinke666]

S2默认不是也有 BlinkMacSystemFont 这个字体么， 为什么默认里没问题？

默认没有, 应该是文档有误

S2/packages/s2-core/src/common/constant/theme.ts

Lines 16 to 23 in db9c900

	/**
	* 默认字体
	*
	* -apple-system 会导致 iOS15 崩溃
	* BlinkMacSystemFont 会导致 g5.0 下 jest-electron 测试环境崩溃
	*/
	export const FONT_FAMILY =
	'Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif';

因为用户的版本 我们没有办法去限制，个别用户版本较低，然后出现了这个问题，才定位到这个问题

那只能避免使用 -apple-system BlinkMacSystemFont 之类的字体

[db-shuai]

S2默认不是也有 BlinkMacSystemFont 这个字体么， 为什么默认里没问题？

默认没有, 应该是文档有误

S2/packages/s2-core/src/common/constant/theme.ts

Lines 16 to 23 in db9c900

	/**
	* 默认字体
	*
	* -apple-system 会导致 iOS15 崩溃
	* BlinkMacSystemFont 会导致 g5.0 下 jest-electron 测试环境崩溃
	*/
	export const FONT_FAMILY =
	'Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif';

因为用户的版本 我们没有办法去限制，个别用户版本较低，然后出现了这个问题，才定位到这个问题

那只能避免使用 -apple-system BlinkMacSystemFont 之类的字体

好的 多谢 ！！

[lijinke666]

🎉 This issue has been resolved in version @antv/s2-v2.0.0-next.24 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[db-shuai]

S2默认不是也有 BlinkMacSystemFont 这个字体么， 为什么默认里没问题？

默认没有, 应该是文档有误

S2/packages/s2-core/src/common/constant/theme.ts

Lines 16 to 23 in db9c900

	/**
	* 默认字体
	*
	* -apple-system 会导致 iOS15 崩溃
	* BlinkMacSystemFont 会导致 g5.0 下 jest-electron 测试环境崩溃
	*/
	export const FONT_FAMILY =
	'Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif';

因为用户的版本 我们没有办法去限制，个别用户版本较低，然后出现了这个问题，才定位到这个问题

那只能避免使用 -apple-system BlinkMacSystemFont 之类的字体

不好意思还两个问题我确认一下
1.这个页面崩溃同样的代码，使用 V1 版本的S2 是正常的，升级为 2版本后才崩溃的，这个什么原因呢？
2.S2的浏览器兼容性版本 - 能否具体一些 ？

[lijinke666]

v1 和 v2 底层使用的渲染引擎 AntV/G 的版本不同, 可能是 G 导致的, S2 声明的字体配置本质会透传给 G, 然后 G 再使用 Canvas 的 API 进行绘制.

现代浏览器的 last 2 versions, 应该够具体了吧? (比如最新版是 126, last 2 version = 126/125)