diff --git a/index-map-area.html b/index-map-area.html index 631ddbe87..8be15a98f 100644 --- a/index-map-area.html +++ b/index-map-area.html @@ -31,12 +31,6 @@ /* border: none; */ } - /* Pre-style to avoid FOUC of inline layer- and fallback content. */ - map[is="web-map"]:not(:defined) + img[usemap], - map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) { - display: none; - } - /* Pre-style to avoid Layout Shift. */ map[is="web-map"]:not(:defined) { display: inline-block; @@ -44,6 +38,12 @@ contain-intrinsic-size: 304px 154px; } + /* Pre-style to avoid FOUC of inline layer- and fallback content. */ + map[is="web-map"]:not(:defined) + img[usemap], + map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) { + display: none; + } + /* Ensure inline layer content is hidden if custom/built-in elements isn't supported, or if javascript is disabled. This needs to be defined separately from the above, because the `:not(:defined)` selector invalidates the entire diff --git a/index-mapml-viewer.html b/index-mapml-viewer.html index a5ed62fa4..5a6853a96 100644 --- a/index-mapml-viewer.html +++ b/index-mapml-viewer.html @@ -31,11 +31,6 @@ /* border: none; */ } - /* Pre-style to avoid FOUC of inline layer- and fallback content. */ - mapml-viewer:not(:defined) > * { - display: none; - } - /* Pre-style to avoid Layout Shift. */ mapml-viewer:not(:defined) { display: inline-block; @@ -43,6 +38,11 @@ contain-intrinsic-size: 304px 154px; } + /* Pre-style to avoid FOUC of inline layer- and fallback content. */ + mapml-viewer:not(:defined) > * { + display: none; + } + /* Ensure inline layer content is hidden if custom/built-in elements isn't supported, or if javascript is disabled. This needs to be defined separately from the above, because the `:not(:defined)` selector invalidates the entire diff --git a/index-web-map.html b/index-web-map.html index b85e23aa2..00a99d0eb 100644 --- a/index-web-map.html +++ b/index-web-map.html @@ -31,12 +31,6 @@ /* border: none; */ } - /* Pre-style to avoid FOUC of inline layer- and fallback content. */ - map[is="web-map"]:not(:defined) + img[usemap], - map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) { - display: none; - } - /* Pre-style to avoid Layout Shift. */ map[is="web-map"]:not(:defined) { display: inline-block; @@ -44,6 +38,12 @@ contain-intrinsic-size: 304px 154px; } + /* Pre-style to avoid FOUC of inline layer- and fallback content. */ + map[is="web-map"]:not(:defined) + img[usemap], + map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) { + display: none; + } + /* Ensure inline layer content is hidden if custom/built-in elements isn't supported, or if javascript is disabled. This needs to be defined separately from the above, because the `:not(:defined)` selector invalidates the entire