Words are overlapping when rendering the canvas

问题

I have a long text to render to a canvas, and words are overlapping and scrambled in Safari. But works perfectly in Chrome. I'm using the latest version of html2canvas library. (v1.0.0-rc.3)

This is the output in safari

html2canvas(document.querySelector("#capture")).then(canvas => {

    var base64image = canvas.toDataURL("image/png");
    document.getElementById('export_img').src = base64image;
});



//html code
<div id='capture'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi magna
            ligula, finibus eget purus quis, vulputate volutpat urna. Etiam vehicula<br> pellentesque justo, eget
            sodales diam ultricies sit amet. Duis pulvinar arcu ut nisl volutpat gravida. Aliquam viverra condimentum
            dui, nec eleifend lorem. Curabitur quis quam ac orci luctus tincidunt. Phasellus <br>ornare ultricies
            porttitor. Donec egestas, ex ut rutrum feugiat, justo libero vehicula ligula, eu auctor lectus nisi ut
            lorem. Phasellus elementum sed tortor non porttitor. Nunc ultricies mattis venenatis. Nam enim eros, rutrum
            aliquet sodales at, interdum eget magna. Sed ac dictum mi, eu efficitur sapien. Vestibulum augue tellus,
            dictum eu imperdiet ac, consectetur vitae libero. Vivamus ligula tellus, dapibus ut sem in, <br>tincidunt
            auctor elit. Ut bibendum augue sit amet tempor consectetur. Maecenas eget aliquam ex. Sed in orci nulla.
</div>

UPDATE: br tags generate the error in Safari. Added white-space:pre-wrap.

来源：https://stackoverflow.com/questions/56592511/words-are-overlapping-when-rendering-the-canvas