Fix ImageSource not working in Firefox and Safari

Co-authored-by: Vladimir Agafonkin <agafonkin@gmail.com>
mapbox · Feb 17, 2021 · 50adf1c · 50adf1c
1 parent f87090b
commit 50adf1c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.13.1
+
+### 🐞 Bug fixes
+- Fix ImageSource not working in some cases in Firefox & Safari. [#10230](https://github.com/mapbox/mapbox-gl-js/pull/10230)
+
 ## 1.13.0
 
 ### ✨ Features and improvements

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",

diff --git 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'});