In this example, I'm using background images in the outside divs in a 3x3 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);
  
    });
})```