Use console warning rather than DOM element to indicate missing stylesheet #6261
Conversation
src/ui/map.js
Outdated
| @@ -1388,12 +1387,20 @@ class Map extends Camera { | |||
| return [width, height]; | |||
| } | |||
|
|
|||
| _hasCSS(): boolean { | |||
| for (const sheet of (window.document.styleSheets: any)) { | |||
There was a problem hiding this comment.
How fast is this if a page has a bajillion CSS rules?
If iterating over them all in JS is expensive, another approach would be:
- Add
.mapboxgl-canary { background-color: salmon; }to mapbox-gl.css. (Unfortunatelycanaryis not a CSS color keyword so I chose another animal.) - Map adds
<div class="mapboxgl-canary" style="visibility: hidden;"/>and then checks the computed background color.
|
Oof, looks like there was a bug (possibly introduced in Chrome 64) causing cross-origin stylesheets not only to be missing a |
|
Switched to checking the computed color of a hidden div as suggested in #6261 (comment) (thank you @jfirebaugh!), both for performance and because of #6261 (comment). |
Agreed. I can think of a couple possible approaches:
|
src/ui/map.js
Outdated
| _detectMissingCSS(): void { | ||
| const computedColor = window.getComputedStyle(this._missingCSSCanary).getPropertyValue('background-color'); | ||
| if (computedColor !== 'rgb(250, 128, 114)') { | ||
| warnOnce('Missing Mapbox GL JS CSS: map may not display correctly.'); |
There was a problem hiding this comment.
This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.
This uses CSSOM interfaces to check for the presence of a
.mapboxgl-mapCSS rule upon map creation and display a warning in the console if it's missing, rather than adding and hiding a DOM element (ref #5785, #5359 (comment)).Fixes #5786.
Having to stub
console.warnso many places in the unit tests feels weird, and treacherous for future writers of tests that includeMap— if there's a better way to do this I'm all ears!Launch Checklist