search

niklasvh / html2canvas

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

cannot render correct content when several div with same z-index stacked #2084

Open jdsxzhao opened 4 years ago

jdsxzhao commented 4 years ago

Bug reports:

When I have several DOM Nodes with same z-index, and let them stacked by absolute position, in real render process, the content in last node can be displayed. But when screenshot with h2c, it can't show. jsfiddle example.

Specifications:

jdsxzhao commented 4 years ago

To be more clear, when several nodes stack, the content in the last node will be displayed in real. But in html2canvas, it shows the content in the first node. jsfiddle this code fragment can show it clearly.

lzw-leaf commented 4 years ago

I also encountered this problem when using htmlCanvas to intercept maps rendered with leaflet.js. Because in leaflet.js, the z-index of the rendered background layer is the same as the z-index of the annotation layer, resulting in incomplete interception. This forced me to try to change the parameters of leaflet.js in depth

fhyoga commented 4 years ago

I also encountered it and just submitted a PR. Should be able to fix this

https://github.com/niklasvh/html2canvas/pull/2089

ghost commented 4 years ago

I encountered this problem, too, with a Gridlayer. The solution was to create a map pane for my layer with z-index of 300 which appears between tile layers and markers etc. see Working with map panes.