Tiles flicker in Microsoft Edge

[bcartmell]

In Microsoft Edge (tested on Windows 10 64-bit), map tiles flicker as if continuously being loaded/unloaded. I observed this issue while working on my current project (proprietary). However, while debugging, I noticed that the example at https://www.mapbox.com/mapbox-gl-js/example/satellite-map/ also demonstrates this behavior. Copied example into JSbin (http://jsbin.com/dabulemife/edit?html,output), but I cannot reproduce the issue there.

mapbox-gl-js version: 0.32.1

Steps to Trigger Behavior

1. load https://www.mapbox.com/mapbox-gl-js/example/satellite-map/
2. May need to pan and/or zoom
3. Observe tiles flickering

Expected Behavior

Tiles load and display cleanly

Actual Behavior

Tiles flicker as if continuously loading and unloading

[jaapster]

I see the same thing happening every 60 secs. in other browsers in an app that we're building. Turns out Cache-Control header was set at max-age=60

[bcartmell]

Thanks for your insight Jaapster. This seems to be fixed now. I loaded the app in Edge again to check the headers that I get. max-age is 43200 and s-maxage is 604800 and I can no longer reproduce the problem in my app or in the example map.

[bcartmell]

Issue reappeared today. cache-control valuse have not changed.

[rgtaylor1989]

Having the same issue when cutting a raster on and off. In this example I have a button that turns the "aerials" off and on. The photo below is from edge. Those white tiles constantly flash and if you look at the network traffic to user, it is constantly trying to get the same raster tiles over and over again. Eventually it will make Edge unresponsive if you leave open network tab open because of the traffic it is creating.

When reloading the page from this flashing state, the canvas never attempts to grab the vector tiles (according to the network tab under the console) and the webgl never populates even though map javascript loads. This might not be related to this issue though.

[bcartmell]

I've verified that this issue only occurs with cached tiles, disabling cache completely resolves it.

[bcartmell]

Does anyone know of a way to disable tile caching that can be targeted at Edge?

[mourner]

Could this be related to #3944? @lbud

[chrisvoll]

We're seeing similar behavior in our tiles, also starting with v0.32.0 in IE11/Edge. We also see an error message when zooming/panning which may be related: Unable to get property 'state' of undefined or null reference. It's referring to this line in SourceCache#reloadTile (tile is undefined), which is called from the expiration timeout.

I've had trouble reproducing the error with Mapbox tiles, but it happens with our own vector and raster sources in this jsbin (tested in Edge 13 on Windows 10 using Browserstack) — the tiles have Cache-Control max-age values of 300 seconds.

Thanks for looking into this! Happy to do more digging if it will help

[edit] ahh, just saw that this error was already discussed in #3944 and later fixed. We're still seeing the error thrown in Edge even in the latest master version of mapbox-gl-js with our tiles

[jaapster]

@chrisvoll We are experiencing the exact same issues with our own raster and geoJSON sources starting with v0.32.0. We get the error Unable to get property 'state' of undefined or null reference not only in Microsoft browsers but also in Chrome but haven't found out how to reliably reproduce it.

[lbud]

@chrisvoll @jaapster to clarify,

We're seeing similar behavior in our tiles, also starting with v0.32.0 in IE11/Edge. We also see an error message when zooming/panning which may be related: Unable to get property 'state' of undefined or null reference.

these are separate issues, right? (Flickering can appear without the error message, and the error message just happens on zoom/pan?)

[lbud]

I'm wondering if the error message may be coming from a Microsoft-specific bug like this one where clearTimeout fails to actually clear a timeout — as implemented, when a user pans a tile out of view it'll be removed from its SourceCache's active tiles but retained in its LRU cache, and its refresh-upon-expiration timeout should be cleared, but if that fails to be cleared it would find tile to be undefined when it attempts to reload itself.

Separately, you're likely seeing tiles flicker because they're already expired when retrieved by the server, or have very short expirations. (We saw this around here too yesterday on some ephemeral tilesets with the S3 outage 😕)

The issue of flickering because of constantly re-requesting tiles that are still expired will be fixed in #4351, which implements an exponential backoff, and also has a workaround for whatever the bug is that's causing the undefined error.

However, I'm not able to reproduce the issues described here locally — if you're able to reproduce this, any chance you can drop in https://gist.githubusercontent.com/lbud/f7f67144be19b09d5707a05ec1d8b1d1/raw/908fd0e1b51a9aebe956382ec470664c5f0dcb0c/mapbox-gl.js (built from #4351) locally and let us know if it's still happening?

[chrisvoll]

@lbud Thanks for putting that together! I just tested it out with our tiles. I can confirm that the error message is gone, but the raster tiles are now flickering according to the exponential backoff timing (2s, 4s, 8s, so on).

I put a copious amount of console.logs in the code to see what's happening, and it looks like the tiles do indeed have an expiration date of about an hour in the past. This is in Edge 13 on Windows 10 via Browserstack, using this jsbin, and I've confirmed it in Edge 14 on a real PC

I also may have found a different issue in that PR (#4351): I noticed in Chrome that in setExpiryData, this.timeAdded is undefined, so even if data.cacheControl is defined, the tiles never expire. setExpiryData seems to be called before this.timeAdded is set.

[lbud]

Thanks for checking it out @chrisvoll!! Attempting to handle all the issues now (including an option to bypass refreshing entirely) in #4351.

[lbud]

Fixed in #4351 — please open a new ticket if issues persist (using master or the next release).