[ x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console
Bug reports:
When html2canvas generates the canvas it clones the html into an iframe. If the cloned HTML meets certain requirements (such as use of ::before or ::after) the html2canvas library adds custom html2canvaspseudoelement elements to the cloned HTML.
If the html being converted to canvas includes styles which target specific children (e.g. :last-child, :not(:last-child)) then the addition of the the html2canvaspseudoelement elements can alter the application of styles in the cloned html and the resulting canvas because the addition of those elements can change which elements match the child based selectors.
(P.S. The example provided is fairly simply and done so intentionally for the purpose of demonstrating the issue. Suggestions of how the CSS could be altered to avoid the issue in this specific example are not helpful as real world examples are not so trivial and altering the CSS may not be an option.)
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:
Bug reports:
When html2canvas generates the canvas it clones the html into an iframe. If the cloned HTML meets certain requirements (such as use of
::beforeor::after) the html2canvas library adds customhtml2canvaspseudoelementelements to the cloned HTML.If the html being converted to canvas includes styles which target specific children (e.g.
:last-child,:not(:last-child)) then the addition of the thehtml2canvaspseudoelementelements can alter the application of styles in the cloned html and the resulting canvas because the addition of those elements can change which elements match the child based selectors.Here is a link to a codesandbox (I hope that's an acceptable alternative to jsfiddle) which recreates the issue: https://codesandbox.io/s/html2canvas-css-bug-6qpnmz?file=/src/App.js:697-1646
(P.S. The example provided is fairly simply and done so intentionally for the purpose of demonstrating the issue. Suggestions of how the CSS could be altered to avoid the issue in this specific example are not helpful as real world examples are not so trivial and altering the CSS may not be an option.)
Specifications: