Dom-to-image: Font variation after Chrome update

[zaghop]

Expected behavior

An image is created that is identical to the DOM element being referenced

Actual behavior

Font styles (weights, size, etc...) seems to be reverting to the browser defaults.

Library version

2.5.2

Browsers

• [ ] Chrome 67.0.3396.79.

[ranneyd]

+1. Have the same issue. Very bad

[CarlosAzocar]

+1. Have the same issue.

[yqkqknct]

+1. Have the same issue.

[fireworkz]

it applies to 2.6.0 (latest at the time of writing) as well

[newmandani]

I've resolved this bug on our company product. The real problem is a css font property you getting here:

function cloneStyle() {
copyStyle(window.getComputedStyle(original), clone.style);

function copyStyle(source, target) {
    target.fontStretch == '';

    if (source.cssText) target.cssText = source.cssText;
    else copyProperties(source, target);

    target.fontStretch = 'normal';
    // here's my fix

    function copyProperties(source, target) {
        util.asArray(source).forEach(function (name) {
            target.setProperty(
                name,
                source.getPropertyValue(name),
                source.getPropertyPriority(name)
            );
        });
    }
}

If I don't do it such way, my font css property become something like
font: 400 100% 14px/14px Arial, Helvetica, sans-serif;

Firefox & Chrome will warn you that whole font statement is wrong and no one of your font property except browser default will not be applied for svg that will become wrong canvas.

You can check it on your own if you set breakpoint to the if (source.cssText) target.cssText = source.cssText; string.

It's not looks like a "silver bullet" so I'll wait for more elegant solution with community help.

[lawsumisu]

@tsayen Considering how much a loss of functionality this is for Chrome users, what is the process for expediting a new release that fixes this?

The one-liner that @newmandani suggested seems fine as long as the fontStretch was originally 100% (also since no browsers support font-stretch right now, it's a fine bandaid for any case at worst).

[saintplay]

This repo have the fix: https://github.com/MichalBryxi/dom-to-image

[maltem-za]

Also related: #220, #235

[IDisposable]

This is actually better fixed by copying the font itself over.

See https://github.com/IDisposable/dom-to-image-more/commit/7d1476ab36a8b9bdc22073b3e3553d3648696064#diff-94b43d5a54b46e49799cce165ab4fec0R236