Broken canvas image only in production

[a-pachkov]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

This bug can be reproduced only in production and only when page fully loaded. You can see it in this model example.
Main issue should be in the last loaded library or resource.

html2canvas version 1.0.0-rc.5 provide same result as #1868
html2canvas version 1.0.0-rc.7 fixed the throwing error bug, but provide new issue with strange almost blank image - video example
html2canvas version 1.0.0-alpha.12 also work without throwing error bug, but provide similar to 1.0.0-rc.7 issue with image - video example

Specifications:

• html2canvas version tested with: 1.0.0-rc.7, 1.0.0-rc.5, 1.0.0-alpha.12
• Browser & version: latest Chrome and Firefox. (in Safari works well)
• Operating system: macOS, Ubuntu. (on Windows works well)

[a-pachkov]

This is an example from staging and production - https://share.getcloudapp.com/o0umyeny
We had to hide export button in production because of this issue.
To test it now I have used this simple script:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
document.head.appendChild(script);

script.onload = function() {
    var chart = document.querySelector('[class*="chartActions"] + [class*="verticalAlign"]')
    html2canvas(chart).then(canvas => {
        document.body.appendChild(canvas);
        canvas.setAttribute("style", "position: absolute; top: 20px; left: 20px;")
    });
}

[a-pachkov]

It was Profitwell script tag like here - #1593 (comment)
Maybe someone faced with similar problem?
What was the solution?

[archekb]

I have this problem too, profitwell.js broke html2canvas :(

[a-pachkov]

I have this problem too, profitwell.js broke html2canvas :(

Profitwell overwrite this method - getComputedStyle, so it not count pseudoEltOptional optional parameter which html2canvas use to get styles of pseudo elements, like ::before and ::after, and start to draw extra elements for each HTML element, even if there was no pseudo elements.
Solution in my case was saving link to original getComputedStyle method before profitwell.js was loaded and overwrite it each time back, before running html2canvas methods.

[archekb]

I have this problem too, profitwell.js broke html2canvas :(

Profitwell overwrite this method - getComputedStyle, so it not count pseudoEltOptional optional parameter which html2canvas use to get styles of pseudo elements, like ::before and ::after, and start to draw extra elements for each HTML element, even if there was no pseudo elements.
Solution in my case was saving link to original getComputedStyle method before profitwell.js was loaded and overwrite it each time back, before running html2canvas methods.

Thanks for your reply! Your solution is works.

const printWindow = window.open("","PRINT", ``);
window.getComputedStyle = printWindow.getComputedStyle;

Is it safe? Rewrite to original getComputedStyle does not broke profitwell.js?

[a-pachkov]

You are welcome!
I return his version back after all, so it should work well.

[archekb]

You are welcome!
I return his version back after all, so it should work well.

Ok, I understand. Thanks.

[niklasvh]

If your code or another library overwrites browser methods like getComputedStyle, the bug is in that code/library