generate image no response in IOS 15.4

[UntilGone]

Bug reports:

Generated image no response when updated IOS to 15.4. Without error or log. Same code in IOS 15.3 running ok.

Demo

/* the dom */
<div>1111</div>

import html2canvas from 'html2canvas';
html2canvas(dom, {
      width: dom.clientWidth,
      height: dom.clientHeight,
      useCORS: true,
      scale: window.devicePixelRatio,
    })
      .then((canvas) => {
        console.log('test111');
        if (canvas) {
          resolve(canvas.toDataURL());
        } else {
          reject(new Error('something wrong'));
        }
      })
      .catch((err) => {
        console.log('test4');
      })
      .finally(() => {
        console.log('test5');
      });
// this code has no log

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: Safari
• Operating system: IOS 15.4

[vendra95]

I have the same problem after update IOS 15.4 on Safari and Chrome browser

[ZhangHang12135]

+1

[j4n17]

same problem

[Vstar18]

same

[TuffyLiu]

same problem

[osnysantos]

Same problem

[niniks]

same

[zhe-he]

Modify scale: Math.min(window.devicePixelRatio, 2) Can solve this problem.

[konradsajdak]

I found issue with iframeLoader in DocumentCloner. In Safari 15.4 and newest MacOS do not call onload function on iframe, created by script and his readyState is interactive all the time so, condition in setInterval is never truthly.

Temporary soluction is remove onload function, use exist setInterval and modify condition with be checking readyState.

var interval = setInterval(function () {
    if (documentClone.body.childNodes.length > 0 && (documentClone.readyState === 'complete' || documentClone.readyState === 'interactive')) {
        clearInterval(interval);
        resolve(iframe);
    }
}, 50);

Code to replace: https://github.com/niklasvh/html2canvas/blob/6020386bbeed60ad68e675fdcaa6220e292fd35a/src/dom/document-cloner.ts#L542-L550

[jesben]

version 1.3.4 works in iOS 15.4.x, but version 1.4.1 do not, either it does not return or it is 10 times slower, no errors! using html2canvas with jsPDF...

[aelbore]

I found issue with iframeLoader in DocumentCloner. In Safari 15.4 and newest MacOS do not call onload function on iframe, created by script and his readyState is interactive all the time so, condition in setInterval are never truthly.

Temporary soluction is remove onload function, use exist setInterval and modify condition with be checking readyState.

var interval = setInterval(function () {
    if (documentClone.body.childNodes.length > 0 && (documentClone.readyState === 'complete' || documentClone.readyState === 'interactive')) {
        clearInterval(interval);
        resolve(iframe);
    }
}, 50);

Code to replace:

https://github.com/niklasvh/html2canvas/blob/6020386bbeed60ad68e675fdcaa6220e292fd35a/src/dom/document-cloner.ts#L542-L550

so far this works for me thanks @KonradSajdak

[toffifeeIt]

I had an issue generating image on IOS 15.4.1 and once I removed a background-image and replaced it with an <img> it was resolved.

[mattyforth]

Same problem with Safari browser on Mac

[niniks]

Since i couldnt get the problem gone i switched to the package > html-to-image Sofar this is running great without problems, i hope this helps more people looking for a quick fix

[ryanatearth]

@niniks Is there an easy way to grab a main javascript file for this? Or is the only way to use node/npm, as I am not using either in my project?

[5PK]

Modify scale: Math.min(window.devicePixelRatio, 2) Can solve this problem.

This worked for me. Happens when I pass a node thats very long.

[wyysf123]

The problem lies in the picture. I set loading='lazy' and the iframe does not trigger onload. Just delete loading='lazy'.

[shooooori0128]

If you're using Next/Image, it sets loading="lazy" by default, so it change to loading="eager", then this problem will avoid.

[dangngocbinh]

I found issue with iframeLoader in DocumentCloner. In Safari 15.4 and newest MacOS do not call onload function on iframe, created by script and his readyState is interactive all the time so, condition in setInterval is never truthly.

Temporary soluction is remove onload function, use exist setInterval and modify condition with be checking readyState.

var interval = setInterval(function () {
    if (documentClone.body.childNodes.length > 0 && (documentClone.readyState === 'complete' || documentClone.readyState === 'interactive')) {
        clearInterval(interval);
        resolve(iframe);
    }
}, 50);

Code to replace:

https://github.com/niklasvh/html2canvas/blob/6020386bbeed60ad68e675fdcaa6220e292fd35a/src/dom/document-cloner.ts#L542-L550

thank you so much @aelbore . It's worked!

[Mtaylorr]

Hello , is there a version that solves this problem or not yet ?