526互联

ios15使用html2canvas页面白屏、崩溃、自动刷新

发布时间 2023-05-17 11:28:03作者: 进军的蜗牛

原文链接：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中有中文，必须给中文的标签设置这样的字体，不然就报错，确实神奇

困扰了一下午，特此记录下