fix: iframe load to ensure images are loaded (niklasvh#2577)

dataease · Jul 14, 2021 · eeb5a3e · eeb5a3e
1 parent 52a03c7
commit eeb5a3e
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts
@@ -97,6 +97,10 @@ export class DocumentCloner {
                 await documentClone.fonts.ready;
             }
 
+            if (/(AppleWebKit)/g.test(navigator.userAgent)) {
+                await imagesReady(documentClone);
+            }
+
             if (typeof onclone === 'function') {
                 return Promise.resolve()
                     .then(() => onclone(documentClone))
@@ -462,6 +466,25 @@ const createIFrameContainer = (ownerDocument: Document, bounds: Bounds): HTMLIFr
     return cloneIframeContainer;
 };
 
+const imageReady = (img: HTMLImageElement): Promise<Event | void | string> => {
+    return new Promise((resolve) => {
+        if (img.complete) {
+            resolve();
+            return;
+        }
+        if (!img.src) {
+            resolve();
+            return;
+        }
+        img.onload = resolve;
+        img.onerror = resolve;
+    });
+};
+
+const imagesReady = (document: HTMLDocument): Promise<unknown[]> => {
+    return Promise.all([].slice.call(document.images, 0).map(imageReady));
+};
+
 const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
     return new Promise((resolve, reject) => {
         const cloneWindow = iframe.contentWindow;
@@ -472,18 +495,15 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
 
         const documentClone = cloneWindow.document;
 
-        cloneWindow.onload =
-            iframe.onload =
-            documentClone.onreadystatechange =
-                () => {
-                    cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
-                    const interval = setInterval(() => {
-                        if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
-                            clearInterval(interval);
-                            resolve(iframe);
-                        }
-                    }, 50);
-                };
+        cloneWindow.onload = iframe.onload = () => {
+            cloneWindow.onload = iframe.onload = null;
+            const interval = setInterval(() => {
+                if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
+                    clearInterval(interval);
+                    resolve(iframe);
+                }
+            }, 50);
+        };
     });
 };