Mapbox-gl-js: Mapbox Tiles not loading IE11 v11.11066

[EmptyBox-Design]

mapbox-gl-js version:

Steps to Trigger Behavior

1. map init
2. add map source
3. add map layer
4. tiles do not load

Have called map.isSourceLoaded() and returns false. Then set map within windows.setInterval() for every 1500ms until map.isSourceLoaded() returns true to add map layers, but will return fales for over 10 minutes.

Visible on IE11 v11.11066. Verified behavior on multiple mapbox examples. Seems to correspond to mapbox unable to handle data loaded into map layer, causing lag/crash.

Expected Behavior

Map Tiles to load

Actual Behavior

Map tiles fail to load

[jfirebaugh]

Can you please create a minimal JSFiddle that reproduces the issue?

[EmptyBox-Design]

https://codepen.io/bpachuca/pen/mmrBqE

IE v11.1066.14393.0
Update version 11.0.41

[jaapster]

Duplicate of #3040?

Try reloading the codepen example, every other time the tiles load.

[EmptyBox-Design]

Our products were tested past this issue in #3040. Windows released a new update April 11th which came along with IE v11.1066, which seems to not be an issue with map init, but with loading data into the map layer.

Thoughts?

[RichardEdm]

Confirm that this is still an issue with both Edge (38.14393.1066.0) and IE (11.1066.14393.0). Map tiles basically load on every other refresh. This includes all the reference examples at: https://www.mapbox.com/mapbox-gl-js/examples/

[EmptyBox-Design]

Hi @RichardEdm

I can confirm that this is still an issue

When I load the map with no data added to the source layer, the map loads fine. When data is added to a layer or map layer, triggers behavior of map not loading.

3040 seems to touch on the fact that Microsoft has no intention of addressing the issue, even knowing the most recent security update seems to correlate with the new issues.

[lauramosher]

Hello, @jfirebaugh !

I've been able to establish that Mapbox continues to fail to load every other refresh.

We also established that this issue does not happen in any windows VM, but does if you're triggering from a direct PC in IE 11 and Edge (I was reading #3040 and saw that someone mentioned it was fix in Edge preview in a VM and thought I'd note that we are not finding the issue in VM's, but on physical windows machines). I thought this was super strange, so I went and found a windows machine to verify. It's true.

My initial debugging has suggested that the failed load never triggers a load event, and so the map is displayed as a "gray" box with the "Mapbox" links / nav at the bottom.

Console shows no errors, it simply stops loading resources after the Sprite PNG.

Here is a JSFiddle that represents the error. https://jsfiddle.net/pwg2xhak/ If you refresh, every other time it will fail to load.

Let me know if I can provide any other debugging information!

[keyofj]

I am having this issue as well. The difference we are having is it is when IE 11 is used as an embedded browser. The symptoms are all the same as described above. Every other refresh it works. I cannot duplicate this when taken outside of an embed point and run in a stand alone browser. It appears that the load event never fires. This seems to only happen in our environment when Windows 10 is used. Windwos 8.1 does not have this issue.

[keyofj]

I would like to note that after reading back on the history of this issue, I found a suggestion to not define a style option during map init and then immediately following call map.setStyle.

This worked in our environment and as of this post, IE 11 when embedded is responding to the additional XHR request.

[EmptyBox-Design]

@keyofj
I apologize if I am not understanding your test case solution, but this example still substantiates the current issue.
https://codepen.io/bpachuca/pen/XRMPNW

[keyofj]

@EmptyBox-Design Not a problem. I realize that this is not a workaround that will help everyone. It did help in our case. We have a legacy application that is built in Clarion 6.3 that uses a browser template that embeds IE 11 into the application unfortunately and is ran on Window Servers using RDP. Your example is how I implemented the work around using a custom mapbox studio style.

[atodd-geoplan]

@everyone, so we have stumbled across this issue too.

FWIW we found that if you turn on 64-bit enhanced mode in IE11 the issue goes away.

This is our situation- we allow our users to switch the mapbox style, and we get the following behaviour, as seen here: https://codepen.io/anon/pen/prBpqq (via a switch style on an interval).

1) either nothing is shown as described above
2) the map is missing pieces.
3) occasionally displays correctly, but eventually will not

Has there been any further progress to report?
Bit of a showstopper for us... we have a public internet product and 15% of our users are on IE11 - some corporate users who have no other choice.

[Erutan409]

@keyofj Thank you for your suggestion. This also corrected the issue in IE for me.

[atodd-geoplan]

There is a code solution of sorts, pure _hackery pokery_ and not a great solution imho, but its better than no map at all.

We set an interval and watch the sourcedataevent, after 5 seconds if it still has not loaded, retry (upto 3 times). 3 seems to be the catch-all. In order to reload the style we need to cache-bust the url.

(typescript sorry):

protected setGLMap(glMap: mapboxgl.Map) {
    this.glMap = glMap;
    this.glMap.on("sourcedata", () => {
      this.mapLoading();
    });
  }

setStyle(styleFile: string): void {
    this.styleReLoading = true;
    this.styleFile = styleFile;
    this.glMap.setStyle(this.styleURL(styleFile));
  }

  reloadStyle(): void {
    this.styleFile =
      this.styleFile +
      (this.styleFile.indexOf("?") > -1 ? "&" : "?") +
      "cb=" +
      new Date().getTime();
    this.setStyle(this.styleFile);
  }

readonly maxLoadingTimeMs = 5000;
  readonly loadingCheckTimeMs = 500;
  readonly maxLoadingFailRetries = 3;
  private loadingFailRetries = 0;
  private loadingTime = 0;
  private loadingInterval;
  private timerRunning = false;

  private mapLoading(): void {
    if (!this.timerRunning) {
      this.timerRunning = true;
      this.loadingTime = 0;
      //todo: replace with one of our own
      window.appui.showNonModalDialog("Map Loading");
      this.loadingInterval = setInterval(
        () => this.checkMapLoaded(),
        this.loadingCheckTimeMs
      );
    }
  }

  private checkMapLoaded(): void {
    if (this.glMap.loaded()) {
      this.timerRunning = false;
      this.loadingFailRetries = 0;
      window.appui.hideNonModalDialog();
      clearInterval(this.loadingInterval);
      return;
    }

    /**
     * known issue in mapbox gl / IE11 where the map does not load every other style refresh
     * so for just IE we are going to retry it a couple of times.
     */
    if (!this.deviceUtilities.isIE()) return;

    this.loadingTime += this.loadingCheckTimeMs;
    if (this.loadingTime > this.maxLoadingTimeMs) {
      this.loadingFailed();
    }
  }

  private loadingFailed() {
    this.timerRunning = false;
    this.loadingFailRetries++;
    clearInterval(this.loadingInterval);
    if (this.loadingFailRetries > this.maxLoadingFailRetries) {
      console.log(
        "We seem to be having trouble loading the map. Please check your connection and/or restart your browser. Thank you.",
        this
      ); // todo: nicer
      this.loadingFailRetries = 0;
      return;
    }
    this.reloadStyle();
  }

[EmptyBox-Design]

We have products in government municipalities where IE11 is widely used and standardized across offices (they have not seen the light yet), and this issue affects a large portion of our user-base. @atodd-geoplan I have implemented your solution here codepen and have been testing on IE11, with some success.

Current Behaviour

• The first load adds source layer with no issue
• The second load has a delay before I see the interval attempt to fire, and after an average of 1.5 minutes the source layer loads as expected.

This is a great flag to check to see if the source has loaded, however, I am curious to why IE11 takes so long to respond to the window.setInterval callback, where Chrome and Firefox seemingly have no problem.

@jfirebaugh gave a complete response here #3040. Detailing known Microsoft issues with their web-workers losing messages, and seems to of stemmed from a security update to IE11, that they will not resolve since they have discontinued support, leaving the community to use Edge as a feasible platform, unfortunately as I stated before and seems to be mirrored by others is IE11 still has a substantial market share and users will leave a page or report issue with map tiles not loading the first attempt.

[joedjc]

I have recently noticed this behaviour when using Microsoft Edge (latest version). Haven't tried any of the suggested workarounds yet. We are using mapbox in a corporate environment so it's crucial that it works in Edge so this does create a problem. Otherwise it performs really well in Edge.

[mourner]

When testing IE11 extensively recently when working on other issues, we haven't experienced this, so there's a chance this is no longer reproducible. So let's close for now, but let us know if it's still a problem with GL JS v1.3.1 — we'll reopen.