From 3f134bce88d1d08b9db552aedb8d600971bdd7cb Mon Sep 17 00:00:00 2001 From: polybjorn Date: Mon, 4 May 2026 10:43:17 +0000 Subject: [PATCH] fix(themes): scope Mapco and Ansum aside transition to width (#8785) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mapco and Ansum apply `transition: all 0.2s ease-in-out` to `.aside` in their narrow `@media`. When the viewport crosses 840px with the sidebar open, the resulting `.aside` position change (`static` to `fixed`) gets animated alongside width, producing a visible artefact where the X button slides down then scrolls back up before settling. Limit the transition to the property that should actually animate (`width`), matching base-theme's existing `transition: width 200ms linear`. The artefact only manifests when the drawer stays open across the 840px boundary, which is the behaviour introduced by #8775. On current edge, `init_nav_menu`'s `media.onchange` toggles the aside off when crossing the breakpoint, hiding the bug. Co-authored-by: Bjørn A. Andersen --- p/themes/Ansum/_mobile.css | 2 +- p/themes/Ansum/_mobile.rtl.css | 2 +- p/themes/Mapco/_mobile.css | 2 +- p/themes/Mapco/_mobile.rtl.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/p/themes/Ansum/_mobile.css b/p/themes/Ansum/_mobile.css index 8ff09716b..358d11e18 100644 --- a/p/themes/Ansum/_mobile.css +++ b/p/themes/Ansum/_mobile.css @@ -4,7 +4,7 @@ @media (max-width: 840px) { .aside { - transition: all 0.2s ease-in-out; + transition: width 0.2s ease-in-out; &.aside_feed { padding: 0; diff --git a/p/themes/Ansum/_mobile.rtl.css b/p/themes/Ansum/_mobile.rtl.css index 28cdb2fca..899ce4d3d 100644 --- a/p/themes/Ansum/_mobile.rtl.css +++ b/p/themes/Ansum/_mobile.rtl.css @@ -4,7 +4,7 @@ @media (max-width: 840px) { .aside { - transition: all 0.2s ease-in-out; + transition: width 0.2s ease-in-out; &.aside_feed { padding: 0; diff --git a/p/themes/Mapco/_mobile.css b/p/themes/Mapco/_mobile.css index eaf8c7f21..e8fb2c795 100644 --- a/p/themes/Mapco/_mobile.css +++ b/p/themes/Mapco/_mobile.css @@ -4,7 +4,7 @@ @media (max-width: 840px) { .aside { - transition: all 0.2s ease-in-out; + transition: width 0.2s ease-in-out; &.aside_feed { padding: 0; diff --git a/p/themes/Mapco/_mobile.rtl.css b/p/themes/Mapco/_mobile.rtl.css index c3c186ca4..05fa875f0 100644 --- a/p/themes/Mapco/_mobile.rtl.css +++ b/p/themes/Mapco/_mobile.rtl.css @@ -4,7 +4,7 @@ @media (max-width: 840px) { .aside { - transition: all 0.2s ease-in-out; + transition: width 0.2s ease-in-out; &.aside_feed { padding: 0;