Pre-style to avoid Layout Shift (#487)

* Add pre-styling to avoid Layout Shift (and appropriate resets)

* Remove scrollbars in index.html

Author: Malvoz

index-map-area.html

@@ -36,6 +36,14 @@
       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;
+        contain: size;
+        contain-intrinsic-size: 304px 154px;
+      }
+      
       /* 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
@@ -51,6 +59,14 @@
         map[is="web-map"]:not(:defined) + img[usemap] {
           display: initial;
         }
+        
+        /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+        custom/built-in elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) {
+          display: initial;
+          contain: initial;
+          contain-intrinsic-size: initial;
+        }
       </style>
     </noscript>
   </head>

index-mapml-viewer.html

@@ -35,6 +35,14 @@
       mapml-viewer:not(:defined) > * {
         display: none;
       }
+      
+      /* Pre-style to avoid Layout Shift. */
+      mapml-viewer:not(:defined) {
+        display: inline-block;
+        contain: size;
+        contain-intrinsic-size: 304px 154px;
+      }
+      
       /* 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
@@ -50,6 +58,14 @@
         mapml-viewer:not(:defined) > :not(layer-) {
           display: initial;
         }
+        
+        /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+        custom/built-in elements is supported but javascript is disabled. */
+        mapml-viewer:not(:defined) {
+          display: initial;
+          contain: initial;
+          contain-intrinsic-size: initial;
+        }
       </style>
     </noscript>
   </head>

index-web-map.html

@@ -36,6 +36,14 @@
       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;
+        contain: size;
+        contain-intrinsic-size: 304px 154px;
+      }
+      
       /* 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
@@ -51,6 +59,14 @@
         map[is="web-map"]:not(:defined) + img[usemap] {
           display: initial;
         }
+        
+        /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+        custom/built-in elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) {
+          display: initial;
+          contain: initial;
+          contain-intrinsic-size: initial;
+        }
       </style>
     </noscript>
   </head>

index.html

@@ -28,13 +28,23 @@
           height: 100%;  
 
          /* Remove default (native-like) border. */ 
-         /* border: none; */ 
+         border: none;
+         
+         vertical-align: middle;
        } 
 
        /* 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;
+         contain: size;
+         contain-intrinsic-size: 304px 154px;
+       }
+       
        /* 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 
@@ -50,6 +60,14 @@
          mapml-viewer:not(:defined) > :not(layer-) { 
            display: initial; 
          } 
+         
+         /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+         custom/built-in elements is supported but javascript is disabled. */
+         mapml-viewer:not(:defined) {
+           display: initial;
+           contain: initial;
+           contain-intrinsic-size: initial;
+         }
        </style> 
      </noscript> 
   </head>