ios/macos safari15 html2canvas 导致页面卡死问题

原创
09/15 10:07
阅读数 4.2K
背景
前几天有人反馈说使用ios/macos的safari预览版打开保险页面会崩溃,大家知道最近评估要发新品,这其中就包括safari15的发布,不清楚15调整了啥导致的,但是问题就是这个问题。
 

排查

下载了safari15的预览版进行了测试,不是所有页面都卡死,经过对比把问题锁定在了html2canvas这个插件上, 由于卡死的时候并没有任何的报错,这是最让人头疼的,排查起来就麻烦了很多,但是没有办法,眼看马上就要发不了,只能使用笨方法,代码删除大法。
对会导致页面卡死的代码进行了递归2分法删除,经过一顿的操作,得出一下结论。
  1. 原生的button会导致页面的崩溃
  2. input 也会导致出问题。
以上的原因是只是建立在我们卡死的页面上得出的,肯定不是全部的问题。看到上面出问题的都是表单元素,我猜测应该是form相关的元素会导致 html2canvas出异常。

再次排查和解决方案

上面虽然知道是button和input导致的,问题是input也没有替代方案,还需要追究原因,我下载了 html2canvas的源码在本地跑起来测试,经过在对button和input的研究最终把问题定位到了font-family上,前端的同学都知道,表单元素会有很多默认设置,大家可以通过chrome或者safari去查看,问题也应该就是处在了这些默认设置上,我重设了font-family解决了问题。
input,button,select,textarea {
font-family:"字体"
}

 

字体是你项目中的字体,经过测试发现arial这个字体是会有问题的。我们项目的字体没有触发问题。

最后

我们虽然查到问题解决了问题,但是不是正统的解决方案,这块我也提了issue给到html2canvas的作者了,从库本身解决才是最终的方案。
展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部