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

背景
前几天有人反馈说使用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的作者了,从库本身解决才是最终的方案。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章