iOS: Components seem to be cut or cropped on smaller screen sizes

[Bodacious]

I've been using this library on a personal project which you can view here:
https://gavinmorrice.com/russian-squat-routine-generator

When you click the button on a larger screen or desktop computer, it downloads the full table content as expected.

But when you click the button on a small screen or mobile device, it seems to crop out a portion of the image. PNG gives the best result, JPEG is worse, and PDFs are coming down as blank.

Any idea what I can do to fix this? Thanks!

[salman-monetate]

Hi, I don't see any difference between desktop and mobile for the above link. Both are exactly the same with no crop. Apart from compression, PNG and JPEG should be exactly the same as we only pass filetype to html2canvas and there is no difference in the rest of the parameters.

For pdf check the options available for {w, h, x, y, unit, orientation, pdfFormat}

[Bodacious]

@salman-monetate thanks for getting back to me.

Could you please tell me which device you tested this on, as I’m still getting the same problem with Safari on iOS (iPhone XS / iOS 14.5)

The image below is what I get on my device.

[salman-monetate]

I tried it with Chrome/Brave on Android.

[Bodacious]

Thank you. I've updated the issue title to reflect that it seems to be iOS only.

I see the same buggy behaviour in Chrome on iOS too.

Any idea where I can start looking to resolve this?

[salman-monetate]

This package heavily relies on html2Canvas, which would be the first place to look into it.

[fredericoo]

I'm facing the same issue! Did you solve it somehow @Bodacious ?

[fredericoo]

WORKAROUND
I was able to make it work by forcing the browser to scroll to a point previous to the element I'm trying to save as. Apparently this is an optimisation process or glitch with the browser that once you go past it only renders half of the viewport worth of pixels. This makes it work (but forcefully scrolls to the top).

[JackyLeeCS]

I faced the same issues, and this option worked for me html2CanvasOptions: { scrollY: 0 }.

[jeffceriello]

Hi, I am having the same issue but even with html2CanvasOptions: { scrollY: 0 } or the scrollY to the position of the component to export I always get a blank image. Only once I managed to get something like 20px in from the bottom of an image but I never managed to get it again. Is there a stable solution to this issue?

[AyoCodess]

where do you add the htmlcanvas options?