There may be cases with your code that once you use HTML2Canvas to take a screenshot on certain parts of the web page, the CSS styles of the HTML elements gets messed up.

Remember, HTML2Canvas does not take a screenshot literally but uses the web page’s DOM structure to traverse through the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page.

It builds a representation of it based on the properties it reads from the DOM.

If your case happens to have a messed up layout after a screenshot is taken, do not worry. You only need to change 1 line of code.

Look for the createWindowClone() function under the Promise block code. There should be a function there that has documentClone.adoptNode().

Thing is, the adoptNode() method adopts a node from another document which means all child nodes and descendants, if any, of the adopted node, are also adopted.

The original node and its descendants are removed from the other document so this is the reason why some cases your CSS may get affected.

The solution to this is to use the alternative method importNode(). Simply change it to:

Related Posts Plugin for WordPress, Blogger...