niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.09k stars 4.75k forks source link

background-image height with Firefox #1599

Open pedubreuil opened 5 years ago

pedubreuil commented 5 years ago

Hello!

I'm getting stuck with an issue about a background-image, on Firefox. Thank you in advance for your help! Best regards

Bug report:

Not working on Firefox:

div.background {
  background-image: url('./assets/images/default-background.svg');
  background-size: cover;
}
div.background {
  background-image: url('./assets/images/default-background.svg');
  background-size: contain;
}
div.background {
  background-image: url('./assets/images/default-background.svg');
  background-size: auto 100vh;
}
div.background {
  background-image: url('./assets/images/default-background.svg');
  background-size: 100vw auto;
}

working on Firefox:

div.background {
  background-image: url('./assets/images/default-background.svg');
  background-size: 100vw 100vh;
}

Details of the error:

Error message: Invalid x value given for Vector Cause: background image height (or width) is '0'

Specifications:

html2canvas version: "1.0.0-alpha.12" Firefox version: 61.0.1 (64 bits) This issue happens only with Firefox (no problem with Chrome).

pedubreuil commented 5 years ago

In html2canvas code:

var backgroundImageSize = (0, _background.calculateBackgroundSize)(background, image, backgroundPositioningArea); ==> { width: NaN, height: 223 } when background-size: contain

diegodotta commented 5 years ago

Same here, for some reason one of my elements is very small and the height is 0.015. I added on line 1012 to fix for now: if(width < 1) width = 1; if(height < 1) height = 1;