IE11 won't render map sometimes

[codenameEli]

Found fix on Mapboxs' github page. Here for reference and todo

https://github.com/mapbox/mapbox-gl-js/issues/2677

[codenameEli]

this.style = 'mapbox://styles/mapbox/streets-v10';
        var isSupported = mapboxgl.supported({ failIfMajorPerformanceCaveat: true });

        // Fallback for older browsers.
        if (!isSupported) {
            this.style = {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "url": "mapbox://styles/mapbox/streets-v9",
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            };
        }

[codenameEli]

This was due to the opacity being set to 0 on the map. We would set the opacity to 1 when the is-loaded class was added.

.syn-map {
    width: 100%;
    height: 430px;
    opacity: 0;
    &.is-loaded,
    .ie & {
        opacity: 1;
    }
}