[IE11] compact attribution not visible in IE11

[mollymerp]

Same issue as mapbox/mapbox.js#1086 and is caused by an IE bug where descendants an invisible element are also made to be invisible 😞

[mapcarta]

This is a legal matter because attribution isn't being displayed at all to any Internet Explorer users, whenever using the compact attribution control. Currently (September 2018) fully 9% of our Mapbox GL JS maps loads use Internet Explorer.

There is a simple fix in using a normal element for the icon instead of the ::after pseudo element. Due to a bug, child pseudo elements of a parent with hidden visibility will always be invisible in Internet Explorer even if their visibility is set to visible.

I've found a CSS solution that overrides the default Mapbox style sheet. It seems to work on all browsers and devices.

.mapboxgl-map .mapboxgl-ctrl-attrib.mapboxgl-compact {padding:0; visibility:visible;}
.mapboxgl-map .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {padding:2px 24px 2px 0;}
.mapboxgl-compact > a {display:none;}
.mapboxgl-compact:hover > a {display:inline;}