Zooming in raster tile layers cause triggers a continues render loop

[vicapow]

To reproduce:

Create a map with a raster tile layer and listen for the 'render' event. Then, Zoom out, then zoom in far.

Expected behavior: 'render' will eventually stop being emitted and map.loaded() returns true.

Actual behavior: render is emitted indefinitely and the loaded state of the map is never true.

diff --git a/debug/index.html b/debug/index.html
index 9d7ca93..cc65b9a 100644
--- a/debug/index.html
+++ b/debug/index.html
@@ -67,32 +67,30 @@ map.addControl(new mapboxgl.GeolocateControl());
 map.addControl(new mapboxgl.ScaleControl());

 map.on('load', function() {
-    map.addSource('geojson', {
-        "type": "geojson",
-        "data": "/node_modules/mapbox-gl-test-suite/data/linestring.geojson"
+
+    map.addSource('raster-source',  {
+      type: 'raster',
+      tileSize: 256,
+      scheme: 'xyz',
+      tilejson: '2.0.0',
+      tiles: [
+        'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
+      ]
     });

     map.addLayer({
-        "id": "route",
-        "type": "line",
-        "source": "geojson",
-        "paint": {
-            "line-color": "#EC8D8D",
-            "line-width": {
-                "base": 1.5,
-                "stops": [
-                    [
-                        5,
-                        0.75
-                    ],
-                    [
-                        18,
-                        32
-                    ]
-                ]
-            }
-        }
-    }, 'country-label-lg');
+      id: 'raster-tile-layer',
+      type: 'raster',
+      source: 'raster-source',
+      'source-layer': 'raster_full',
+      paint: {
+        'raster-opacity': 1
+      }
+    })
+
+    map.on('render', function() {
+      console.log('render');
+    })

Here's also a GIF

[mourner]

Thanks for the report! Looks like a serious issue.

[vicapow]

This also prevents map.loaded() from returning true, which is why I was digging into this. see related issue: #3301

[kriscarle]

I think I found a second issue. After merging #3399 the loop with the _sourcesDirty flag was fixed but then it gets stuck in an a animation loop setting the _styleDirty flag. It appears to be related to #3532 and #3526. Specifically Tile.setAnimationLoop (https://github.com/mapbox/mapbox-gl-js/blob/master/js/source/tile.js#L44) is called every time the tile is rendered constantly extending the length of the animation. Hacking that not to reset the animation fixed the loop.

However that led to a fade-in animation each time I zoom the map that is causing my raster overlay to flash. Is that how it is intended to work? Maybe I just need to set raster-fade-duration to zero on overlays? For now I'm just forcing it to zero. In case it helps, you can see my hack here: https://github.com/maphubs/mapbox-gl-js/commit/2d79f689a92f0efa1a3849c1b19540c597b8b1b1

[jaapster]

I just noticed that this issue has significant performance impact when drawing. Related to #3812.

[dannybloe]

This bug makes working with IE11 almost impossible as soon as you tilt the map. All these render cycles take a huge amount of time when the map is tilted. It's impossible to render geojson layers at this point.
Our application has multiple raster layers each firing a continuous stream of render actions. CPU load is 15-25% while doing nothing.

Please fix :)

[stackTom]

I have a similar problem but with a vector tile source. Could it be related: #3866 ?

[mourner]

@stackTom can you reproduce it with a minimal test case (e.g. in a JSFiddle) on the latest master? If so, please report a new issue.

[stackTom]

@mourner it was actually due to a raster layer I am using in my project, and not any of my vector layers. Please see #3866