Using html2canvas on element with calculated background-size crashes with TypeError

[delventhalz]

Bug reports:

I was able to make html2canvas crash, with the following TypeError:

TypeError: Cannot read property 'type' of undefined
    at isLengthPercentage (length-percentage.ts:8)
    at calculateBackgroundSize (background.ts:94)
    at calculateBackgroundRendering (background.ts:55)
    at canvas-renderer.ts:556
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at step (tslib.es6.js:82)
    at Object.next (tslib.es6.js:78)
    at fulfilled (tslib.es6.js:68)

Line 7-8 of length-percentage.ts looks like this:

export const isLengthPercentage = (token: CSSValue): token is LengthPercentage =>
    token.type === TokenType.PERCENTAGE_TOKEN || isLength(token);

This is how I am calling html2canvas in my code:

const cards = document.getElementById('cards');

for (const card of cards.children) {
  const canvas = await html2canvas(card);
}

After some trial and error I was able to find the CSS style that caused the crash:

.combatCard-text-area {
  background-size: calc(100% - 10px);
}

This is a class which is applied to a child of some of the card elements. I was able to work around the issue by replacing the calculated background size with absolute pixels:

.combatCard-text-area {
  background-size: 215px;
}

Note that there are other classes with calculated values for CSS properties other than background-size. There are also other classes with background-size properties that use % or px. None of these other classes seem to cause the crash.

Specifications:

• html2canvas version tested with: 1.0.0-rc7
• Browser & version: Chrome Version 87.0.4280.141 (Official Build) (x86_64)
• Operating system: macOS 10.15.7 (19H114)

[soluml]

I'm running into the exact same issue. Struggles with calc in background-size.

[AZhuravski]

I was able to work around the issue by replacing the calculated background size with absolute pixels:

I found out another solution: I created an extra element with the same background settings and additional data-html2canvas-ignore attribute for this element. html2camvas works properly but there is no background image on screenshot - for me it was acceptable.