Edge Chromium disables transitions under prefers-reduced-motion while other browsers do not

CSS3 prefers-reduced-motion Media Query Inconsistency

The CSS Media Queries Level 5 specification defines prefers-reduced-motion to respect user motion preferences, but leaves ambiguity about whether CSS transitions should be suppressed alongside animations.

Chrome 74+, Firefox 63+, and Safari 13.1+ disable CSS animations when prefers-reduced-motion: reduce is set, but permit transitions to execute normally. Microsoft Edge (Chromium-based) differs by disabling both animations and transitions under the same media query condition.

This creates an unresolved accessibility implementation gap where developers cannot rely on consistent cross-browser behavior for transition handling. The CSS Working Group maintains an open issue regarding whether transitions should fall within the scope of prefers-reduced-motion, leaving developers to implement workarounds for inconsistent user experiences.

Key Questions

• Should developers explicitly exclude transitions from accessibility considerations, or implement browser-specific overrides?
• Does the specification ambiguity require polyfill solutions or conditional CSS overrides?
• Which browsers will align their behavior with Edge's more restrictive approach in future releases?