From 0f5780720a0a04fe45e3c6959daad7bd10959d13 Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Sat, 19 Dec 2020 02:48:15 +0200
Subject: [PATCH] fix ImageSource not working in FF/Safari (#10230)

---
 src/util/ajax.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/util/ajax.js b/src/util/ajax.js
index 86f58e6e37f..e3dfeeef0e9 100644
--- a/src/util/ajax.js
+++ b/src/util/ajax.js
@@ -280,9 +280,11 @@ function arrayBufferToImage(data: ArrayBuffer, callback: (err: ?Error, image: ?H
     img.onload = () => {
         callback(null, img);
         URL.revokeObjectURL(img.src);
-        // prevent image dataURI memory leak in Safari
+        // prevent image dataURI memory leak in Safari;
+        // but don't free the image immediately because it might be uploaded in the next frame
+        // https://github.com/mapbox/mapbox-gl-js/issues/10226
         img.onload = null;
-        img.src = transparentPngUrl;
+        window.requestAnimationFrame(() => { img.src = transparentPngUrl; });
     };
     img.onerror = () => callback(new Error('Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.'));
     const blob: Blob = new window.Blob([new Uint8Array(data)], {type: 'image/png'});