Fix ImageSource not working in Firefox and Safari

Co-authored-by: Vladimir Agafonkin <[email protected]>

Author: Ryan Hamley

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

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",

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