From cd4aba28eb5c03cbac303884d5d15350edc0f328 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 24 Sep 2025 11:17:02 +0100 Subject: [PATCH 1/3] Wait for Vue to load before allowing this transition otherwise you see the Sidebar animate in on load in Firefox (and sometimes Safari) --- resources/css/core/layout.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 37dc46ea323..26f8f45b4ed 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -62,8 +62,11 @@ main { @apply ps-0 md:ps-46; - /* Only padding because we don't wand to transition the color when we switch between light/dark mode */ - transition: padding 0.3s ease-in-out; + /* Wait for Vue to load before allowing this transition otherwise you see the Sidebar animate in on load in Firefox (and sometimes Safari) */ + body:has([data-v-app]) & { + /* Only padding because we don't wand to transition the color when we switch between light/dark mode */ + transition: padding 0.3s ease-in-out; + } } .nav-closed main { From 171a4a68a45053ac61de26f21ad17ddbbafcf251 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 24 Sep 2025 12:09:35 +0100 Subject: [PATCH 2/3] Some firefox fixes for Vue loading in --- resources/css/core/utilities.css | 12 ++++++++++++ resources/js/components/GlobalSiteSelector.vue | 2 +- .../views/components/breadcrumbs/dropdown.blade.php | 1 + .../views/components/global-site-selector.blade.php | 1 + 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 1aa0ab5ff35..7f72896dd63 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -13,6 +13,18 @@ z-index: var(--z-index-max); } +@utility firefox-opacity-0 { + @supports (-moz-appearance: none) { + opacity: 0; + } +} + +@utility firefox-transition-duration-200 { + @supports (-moz-appearance: none) { + transition-duration: 0.2s!important; + } +} + /* UTILITIES / TEXT =================================================== */ /* Avoid prefixing things with `st-text-` (st for Statamic) because `text-` is a Tailwind prefix */ diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue index ef5a2697411..373cce1c86b 100644 --- a/resources/js/components/GlobalSiteSelector.vue +++ b/resources/js/components/GlobalSiteSelector.vue @@ -1,5 +1,5 @@