From dd0ee83f7dcad49eb9c3883a5f6c8df5a8be6d36 Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <7898-ckrina@users.noreply.drupalcode.org>
Date: Wed, 8 May 2024 13:47:36 -0700
Subject: [PATCH] Issue #3446078 by mherchel, javi-er: Olivero content shift on
page load
---
core/themes/olivero/css/layout/layout.css | 9 +++++++++
core/themes/olivero/css/layout/layout.pcss.css | 8 ++++++++
core/themes/olivero/css/layout/region.css | 6 +++---
core/themes/olivero/css/layout/region.pcss.css | 2 +-
4 files changed, 21 insertions(+), 4 deletions(-)
diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index 375359860382..a57e5e7fee14 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/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;
+}
diff --git a/core/themes/olivero/css/layout/layout.pcss.css b/core/themes/olivero/css/layout/layout.pcss.css
index ded782cd0869..eed28ec0716f 100644
--- a/core/themes/olivero/css/layout/layout.pcss.css
+++ b/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;
+}
diff --git a/core/themes/olivero/css/layout/region.css b/core/themes/olivero/css/layout/region.css
index e6a968ddcad3..a1bfc22c3fc5 100644
--- a/core/themes/olivero/css/layout/region.css
+++ b/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);
}
}
diff --git a/core/themes/olivero/css/layout/region.pcss.css b/core/themes/olivero/css/layout/region.pcss.css
index c04a06061661..dc6fbb289206 100644
--- a/core/themes/olivero/css/layout/region.pcss.css
+++ b/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) {
--
GitLab