html2canvas在Safari中不能很好地包装文字

Question

html2canvas似乎无法正确处理Safari的换行符（至少同时适用于Catalina和iOS 13.3.1），而在Chrome和Firefox上运行良好。

$('#capture').css('color', 'blue');
html2canvas($('#capture')[0], {}).then(function(canvas) {
    $('#capture').css('color', 'red');
     $('#capture').append(canvas);
   });

这里是显示问题的jsFiddle。我尝试指定较大的画布大小，缩放比例，填充和边距，将scrollX和scrollY设置为零，以及传闻的letterRendering，但是我没有运气。我是在做错什么，这是解决方法的错误，还是我被卡住了？

（这可能是与Words are overlapping when rendering the canvas相同的问题，但是我没有足够的声誉来评论这个问题，而且似乎我不应该将自己的信息添加为答案，因为这不是答案。我该如何解决？真的可以处理吗？）

Answer 1

根据我上面的评论，这似乎是Safari处理getClientBoundingRect中的错误，此错误已在“ Safari技术预览版102 WebKit 15610.1.5.2”中修复。

在我看来，html2canvas的函数testRangeBounds旨在检测getClientBoundingRect实现中的其他错误，如果存在错误，请将SUPPORT_RANGE_BOUNDS设置为false，这将导致parseTextBounds处理文本换行而不依赖getClientBoundingRect。解决方法是，我将testRangeBounds更改为始终返回false。这为我解决了Catalina Safari和iOS Safari中的问题，并且在Chrome中仍然可以正常使用。我怀疑它的缺点是速度较慢，但​​我在等待html2canvas的github网站上的回音。