Sfoglia il codice sorgente

fix(themes): scope Mapco and Ansum aside transition to width (#8785)

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 <polybjorn@users.noreply.github.com>
polybjorn 2 settimane fa
parent
commit
3f134bce88

+ 1 - 1
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;

+ 1 - 1
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;

+ 1 - 1
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;

+ 1 - 1
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;