In this example, I’m using background images in the outside divs in a 3×3 grid of divs.
There is no border or margin between the divs, and the HTML output seems fine.
However, when I convert this to an image, using html2canvas, the resulting image shows transparent lines between the divs. Almost like there is a single pixel margin on each div.
Am I doing something wrong, or is this a bug in html2canvas?
https://jsfiddle.net/Onefunction/abry3x67/
NB, I have raised an issue in html2canvas’s github
EDIT For some reason, I have to add code here, even though it’s all on jsfiddle.
so here’s the javascript i used…
html2canvas(document.querySelector(".ttable"), {
scrollX: -window.scrollX,
scrollY: -window.scrollY,
backgroundColor: null,
allowTaint: true,
useCORS: true,
// logging: true,
}).then((generatedImage) => {
jQuery(".ttable-image").html(generatedImage);
});
})```