Issue #3446078 by mherchel, javi-er: Olivero content shift on page load

core/themes/olivero/css/layout/layout.css

@@ -65,3 +65,12 @@ body.is-fixed .container {
     padding-block-start: var(--sp5);
   }
 }
+
+/*
+ * Contextual link wrappers load without the ".contextual" CSS class, which
+ * causes layout shifts. We fix this by setting this to position: absolute;
+ */
+
+[data-contextual-id]:not(.contextual) {
+  position: absolute;
+}

core/themes/olivero/css/layout/layout.pcss.css

@@ -55,3 +55,11 @@
     padding-block-start: var(--sp5);
   }
 }
+
+/*
+ * Contextual link wrappers load without the ".contextual" CSS class, which
+ * causes layout shifts. We fix this by setting this to position: absolute;
+ */
+[data-contextual-id]:not(.contextual) {
+  position: absolute;
+}

core/themes/olivero/css/layout/region.css

@@ -10,18 +10,18 @@
  * Region default layout.
  */
 
-.region > * {
+.region > *:where(:not([data-big-pipe-placeholder-id])) {
   margin-block-end: var(--sp);
 }
 
 @media (min-width: 43.75rem) {
-  .region > * {
+  .region > *:where(:not([data-big-pipe-placeholder-id])) {
     margin-block-end: var(--sp2);
   }
 }
 
 @media (min-width: 62.5rem) {
-  .region > * {
+  .region > *:where(:not([data-big-pipe-placeholder-id])) {
     margin-block-end: var(--sp3);
   }
 }

core/themes/olivero/css/layout/region.pcss.css

@@ -5,7 +5,7 @@
 
 @import "../base/media-queries.pcss.css";
 
-.region > * {
+.region > *:where(:not([data-big-pipe-placeholder-id])) {
   margin-block-end: var(--sp);
 
   @media (--md) {