最近ios15系统推出了，公司的app开始测试ios15的兼容，然后就出现了有截图的页面卡顿白屏的问题。

业务场景是这样，我们的每个页面都会有多个截图，截图使用的方式是html2canvas这个插件，

1、截图方法如下：

// 截图方法
 function convertToPoster() {
   var $poster = $('#poster-content');
   html2canvas($poster[0], {useCORS: true})
     .then(
     function (canvas) {
       var oImage = new Image();
       oImage.src = canvas.toDataURL('image/png', 1);
       $(oImage)
         .addClass('poster');
       $poster.parent()
         .after(oImage)
         .hide();
     }
   );
 };

2、调用方法如下：

$(window).load(function() {
  convertToPoster();
})

3、问题现象：

当页面先截一张图之后，再去截第二张图时，页面就会出现卡顿白屏的问题，这个问题时必现，且在ios的浏览器中走也是这样。

4、解决方案：

经过很多轮的调试之后，依然找不出原因，因为既无报错也不确定页面是在哪行代码卡住的，最终只能采用笨办法，去屏蔽页面的html结构，只留下两个截图的结构，突然好运降临，页面不卡了，截图成功了，那是不是就能证明是页面的某个dom结构导致的呢？

因为页面较为复杂，最终经过10多轮的屏蔽组合，终于确定在了button这里，那么这个button按钮的样式会有什么影响呢？

一步一步挨个去屏蔽属性，结果并没有预料中的变好，正在疑惑之时，突然看到了用户代理样式里面有三个属性是没有替换的，其中有个font-family:system-ui这个样式在chrome浏览器中是没有的，会不会是这个影响的呢？果然屏蔽了它之后就可以了，页面操作无比丝滑。

我们先来看看这个样式究竟是什么意思？

system-ui是一种通用字体系列，它选择当前操作系统下的默认系统字体，它的优势在于和当前系统使用的字体相匹配，可以让Web页面和App风格看起来更统一。

话说它虽然出现得比较晚，但是在can i use上显示的兼容性还是很好的，为啥会出现在ios15的手机系统上呢？目前ios15的资料还少之又少查不到,有待于深究。

记录下目前的处理方案：

//兼容ios15手机系统字体导致的问题
var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
  var ios_ver = parseInt(navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/\_/g, '.'));
  if (ios_ver >= 15) {
    if ($('button')) {
      $('button').css('font-family', 'PingFangSC-Regular');
    }
  }
}

版权声明

本文为[青咕咕]所创，转载请带上原文链接，感谢

https://juejin.im/post/7006119499216715783