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

·  阅读 394

近期公司在做一个关于分享海报的项目,延用之前的方案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. 翻译过来就是:它表示默认用户界面字体,即选择当前操作系统下的默认系统字体,兼容性也还是很好的,如图:

微信图片_20211116152024.png

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

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改