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

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

Edge Chromium suppresses both CSS animations and CSS transitions when prefers-reduced-motion: reduce is active. Chrome, Firefox, and Safari suppress only keyframe animations and allow property transitions to run. The direct answer is that Edge applies a stricter interpretation of reduced motion, while the other browsers treat transitions as direct interaction feedback and leave them enabled.

Likely explanation

CSS Media Queries Level 5 defines prefers-reduced-motion but does not explicitly state whether property transitions must be suppressed alongside animations. That ambiguity lets vendors diverge. Edge appears to treat any timed visual change as motion covered by the user preference. Chrome, Firefox, and Safari historically limit suppression to animations generated by @keyframes. The CSS Working Group issue on scope remains open, so this is an implementation difference, not a confirmed bug.

Confirmed facts

• Edge (Chromium-based) disables animations and transitions under prefers-reduced-motion: reduce, with the change appearing around Edge 110–115 (2023); exact version boundaries need verification.
• Chrome 74+, Firefox 63+, and Safari 13.1+ disable only CSS animations under the same condition.
• No major vendor has announced plans to align with Edge’s stricter approach.
• Forcing transition-duration: 0.01s !important globally can break smooth focus indicators needed for accessibility compliance.

Steps to verify the behavior

1. Create a page with one @keyframes animation and one :hover property transition.
2. Enable the operating system “Reduce motion” accessibility setting.
3. Open the page in Edge, Chrome, Firefox, and Safari and observe which effects run.
4. Record the exact Edge version from the browser’s About page.

<style>
.box { transition: transform 0.3s ease; }
.box:hover { transform: scale(1.1); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .box { transition-duration: 0.01s !important; }
  .spin { animation-duration: 0.01s !important; }
}
</style>

Assumptions: the Edge version numbers are approximate and should be confirmed against current release notes. The CSS Working Group discussion could change future behavior, making current workarounds obsolete.

Do you need transitions to remain active for keyboard focus indicators while disabling hover motion?