ios15使用html2canvas页面白屏、崩溃、自动刷新
原文链接:https://www.cnblogs.com/yalong/p/17408067.html
背景
有个H5内嵌App的项目,做分享功能的时候用到了 html2canvas, 在IOS15(Iphone11 pro)上,
只要点击分享就会触发页面reload 或者直接白屏,把H5链接在手机上用浏览器访问点击分享也不行,会触发浏览器自动刷新,看来就是这个html2canvas的问题了
问题排查
我的代码如下
let ShareModel = document.getElementById('model-box');
html2canvas(ShareModel, {
width: ShareModel.clientWidth,
height: ShareModel.clientHeight,
useCORS: true
}).then(function (canvas) {})
网上查到说降级html2canvas 版本,但是还不行
那就试试把ShareModel 改成其他div,竟然是可以的
那就确定是id 为 model-box 的这个div里面有问题
尝试把div里面的内容删除一些,慢慢找到了引起白屏的竟然是一个div标签,它的内容没啥特殊的,只是用户的昵称
百思不得其解,为啥就这个标签有问题,改成其他的就没事了,model-box里面有很多标签,为啥就这个昵称会导致白屏,为什么?
后来突然想到,这个昵称是中文的,难道说是中文引起的,于是把内容改成英文、数字 都试了下,竟然好了, 就是中文引起的
在网上找到了解决方案,就是给这个中文标签设置字体,代码如下:
.textContainer{
font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;
}
原来使用html2canvas,如果div中有中文,必须给中文的标签设置这样的字体,不然就报错,确实神奇
困扰了一下午,特此记录下