IOS15系统手机使用html2canvas刷新问题

近期公司在做一个关于分享海报的项目，延用之前的方案html2canvas，公司测试机安全无误的进入上线阶段，可就在临近球门的一刹那，在同事的新系统IOS15出现了闪屏、重新加载的问题，两行泪🤣

使用方法如下：

  drawImg() {
    return from(html2canvas(this.dialog, { scale: 2, backgroundColor: '#000' }));
  }
  shareEvent() {
     of(0)
      .pipe(      
        switchMap(() => this.drawImg()),
        tap(canvas => {
          this.shareSrc = canvas.toDataURL('image/jpeg');
        }),
        catchError(res => {
          return of(res);
        }),
      )
      .subscribe();
  }

调用方法：

 this.$nextTick(() => {
      this.shareEvent();
    });

问题

生成图片后长嗯屏幕保存图片的时候 页面刷新

解决方案

经过了多轮测试仍未找到问题，并且页面的结构非常简单。最后将页面不相关的JS、CSS依次删除，发现最后问题出现在CSS部分，又逐行排查，最后定位到font-family: system-ui, -apple-system;

让我们来看看system-ui官方给的解释是什么：Value for font-family that represents the default user interface font. 翻译过来就是：它表示默认用户界面字体，即选择当前操作系统下的默认系统字体，兼容性也还是很好的，如图：

但是为什么在IOS15上出现此问题，还有待深究，如有知道的大神可以在评论区告知，万分感谢！

由于我们本站没有实质性的输入展示内容，所以暂时将页面的font-family字体设置成了PingFangSC-Regular