Bypass the DOM rendering queue if map is idle

src/ui/map.js

@@ -2528,6 +2528,10 @@ class Map extends Camera {
         this.painter.setBaseState();
 
         this._renderTaskQueue.run(paintStartTimeStamp);
+        // The queue below may have tasks that need to be run but the queue won't always be ran: to
+        // avoid this, tasks need to be called directly instead of being added to the queue. See
+        // ui/popup.js or ui/marker.js for example. This won't be a performance issue as very few
+        // elements will be concerned by the rendering.
         this._domRenderTaskQueue.run(paintStartTimeStamp);
         // A task queue callback may have fired a user event which may have removed the map
         if (this._removed) return;

src/ui/marker.js

@@ -507,11 +507,20 @@ export default class Marker extends Evented {
             this._pos = this._pos.round();
         }
 
-        this._map._domRenderTaskQueue.add(() => {
+        const transformFn = () => {
             if (this._element && this._pos && this._anchor) {
                 DOM.setTransform(this._element, `${anchorTranslate[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px) ${pitch} ${rotation}`);
             }
-        });
+        };
+
+        // This condition means that the map is idle: the transformation needs to be manually
+        // applied as there won't be a triggered render. This shouldn't impact performance as the
+        // move shoud be limited to very few elements.
+        if (!this._map.isMoving() && this._map.loaded()) {
+            transformFn();
+        } else {
+            this._map._domRenderTaskQueue.add(transformFn);
+        }
     }
 
     /**

src/ui/popup.js

@@ -572,12 +572,22 @@ export default class Popup extends Evented {
         }
 
         const offsetedPos = pos.add(offset[anchor]).round();
-        this._map._domRenderTaskQueue.add(() => {
+
+        const transformFn = () => {
             if (this._container && anchor) {
                 DOM.setTransform(this._container, `${anchorTranslate[anchor]} translate(${offsetedPos.x}px,${offsetedPos.y}px)`);
                 applyAnchorClass(this._container, anchor, 'popup');
             }
-        });
+        };
+
+        // This condition means that the map is idle: the transformation needs to be manually
+        // applied as there won't be a triggered render. This shouldn't impact performance as the
+        // move shoud be limited to very few elements.
+        if (!this._map.isMoving() && this._map.loaded()) {
+            transformFn();
+        } else {
+            this._map._domRenderTaskQueue.add(transformFn);
+        }
     }
 
     _focusFirstElement() {