html2canvas doesn't seem to handle wrapping text correctly for Safari (at least both Catalina and iOS 13.3.1), whereas it works fine under Chrome and Firefox.
$('#capture').css('color', 'blue');
html2canvas($('#capture')[0], {}).then(function(canvas) {
$('#capture').css('color', 'red');
$('#capture').append(canvas);
});
Here's a jsFiddle that shows the problem. I've tried specifying larger canvas sizes, scaling, padding and margins, setting scrollX and scrollY to zero, and the rumored letterRendering, but I've had no luck. Am I doing something wrong, is this a bug with a workaround, or am I just stuck?
(This is probably the same question as Words are overlapping when rendering the canvas, but I don't have enough reputation to comment on the question and it seems I shouldn't add my info as an answer, since it's not an answer. How should I really handle this?)
As per my comment above, this seems to be a bug in Safari's handling of getClientBoundingRect which is fixed in "Safari Technology Preview Release 102 WebKit 15610.1.5.2".
It seems to me that html2canvas's function testRangeBounds is meant to detect some other bug in the implementation of getClientBoundingRect and if it is buggy, set SUPPORT_RANGE_BOUNDS to be false, which causes parseTextBounds to handle text wrapping without relying on getClientBoundingRect. As a work-around, I changed testRangeBounds to always return false. This fixed the problem for me in both Catalina Safari and iOS Safari, and it continues to work fine in Chrome. I suspect the downside is that it's slower, but I'm waiting to hear back on html2canvas's github site.