HTML 2 Canvas issue on MacOS

[talhameer]

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:

• You are using the latest version
• I'm using from npm

Bug reports:

I'm creating HTML-to-PDF using this package. The HTML preview is perfect on all devices including Mac and Windows. But when I make a PDF, everything goes smoothly on Windows and all browsers. But on Mac, I face some issues related to image placement on MacBook when I make PDFs. On Safari, the image is not displayed. And on Google Chrome the image is zoomed and not positioned centered as it is previewed.

The following are the CSS styles that are being applied.

export const ImageWrapper = styled.div`
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;

  img {
    position: absolute;
    width: 100%;
    height: auto;
  }
`;

Please let me know how I can fix this issue.

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: Chrome and Safari
• Operating system: MacOS

[Zenith-09]

I have been experiencing this same issue in my project.

[talhameer]

Hey @Zenith-09, I was using the Image component in NextJS to render the images, which is why they got zoomed on MacOS. I used the HTML native img element, and this issue was resolved.