Gradients using a rgba() color with alpha 0 make html2canvas crash silently in Firefox

[Paratron]

A linear gradient, used as a background that goes from transparent to filled color makes html2canvas fail silently in recent Firefox.

Thats the problematic CSS class:

background: transparent linear-gradient(to right, rgba(255, 255, 255, 0), #fff);

It ONLY fails in Firefox. Works fine in Chrome and Internet Explorer. Also, when the RGBA statement doesn't have the alpha channel set to 0, it works as well in Firefox.

I set up a fiddle, here: http://jsfiddle.net/ycm9mfjL/2/

[Paratron]

Notice: setting the alpha value to a minimum of 0.01 makes html2canvas work again in Firefox. Sounds to me like some tiny math error.

[Paratron]

Okay, I found the bug.

It happens here: https://github.com/niklasvh/html2canvas/blob/master/src/lineargradientcontainer.js#L45

And it happens because Firefox seems to convert the rgba(x,x,x,0) to the string literal "transparent", which fails to compare to the regex that tries to match the color stop.

Because of that, colorStopMatch becomes null, which makes the next line crash, when the script tries to access colorStopMatch[1].

So the regEx needs to be fixed - and I personally would also include a if-statement to generally check if colorStopMatch could be null, beause you cannot trust in a regEx at that point.

[usmonster]

This is because of #469. This should be fixed soon--please follow the other issue and feel free to close this one.

[usmonster]

@Paratron can you please check to see if this problem is solved on master?

[Paratron]

Hm, there seems to be no html2canvas.js file in the master repo to test against. There was one before - I've built the fiddle with it, but its gone now. Can you place a ready built library again in the main project folder (or maybe in a "build" subfolder) to quickly reference and/or download?

[usmonster]

@Paratron The built file should be in the dist directory now. :)

[Paratron]

I can confirm, that the new build from the dist directory works fine with Mozilla Firefox, now!

I've updated the fiddle: http://jsfiddle.net/ycm9mfjL/4/

Thanks for the fix!