fix(cdk/overlay): disable overlay animation with prefers-reduced-motion (#30858)

crisbeto · crisbeto · commit 604e4d6c98bc · 2025-04-14T20:56:04.000+02:00
Disables the CDK's backdrop transition if the `prefers-reduced-motion` media query is enabled. (cherry picked from commit 91a0cf9)
diff --git a/src/cdk/overlay/_index.scss b/src/cdk/overlay/_index.scss
@@ -85,7 +85,6 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   }
 
   .cdk-overlay-backdrop {
-    // TODO(jelbourn): reuse sidenav fullscreen mixin.
     position: absolute;
     top: 0;
     bottom: 0;
@@ -100,6 +99,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
       z-index: $overlay-backdrop-z-index;
       transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
     }
+
+    @media (prefers-reduced-motion) {
+      transition-duration: 1ms;
+    }
   }
 
   .cdk-overlay-backdrop-showing {

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,6 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`.cdk-overlay-backdrop {`
`88`		`- // TODO(jelbourn): reuse sidenav fullscreen mixin.`
`89`	`88`	`position: absolute;`
`90`	`89`	`top: 0;`
`91`	`90`	`bottom: 0;`
`@@ -100,6 +99,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;`
`100`	`99`	`z-index: $overlay-backdrop-z-index;`
`101`	`100`	`transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;`
`102`	`101`	`}`
	`102`	`+`
	`103`	`+ @media (prefers-reduced-motion) {`
	`104`	`+ transition-duration: 1ms;`
	`105`	`+ }`
`103`	`106`	`}`
`104`	`107`
`105`	`108`	`.cdk-overlay-backdrop-showing {`