css transition: trigger transitionend not firing when user has accessibility option “reduced motion” set

Question

This week i have been searching for a \"bug\" i introduced in my webpage. I moved over to CSS transitions. To be specific: i used it for opening and closing a menu. One user

Answer 1

I found the solution! The javascript function https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia (until today unknown to me) returns an object you can use to change the behaviour of your page.

I created a working example. It is a snippet copied from/credits to: https://webkit.org/blog-files/prefers-reduced-motion/prm.htm When you run the snippet it responds realtime to the changed settings in your OS control panel.

var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
    document.getElementById('prmValue').innerText = motionQuery.matches ? 'on' : 'no-preference or unsupported';
}
handleReduceMotionChanged(); // trigger this once on load to set up the initial value
motionQuery.addListener(handleReduceMotionChanged); // Note: https://webkit.org/b/168491

Using JavaScript to access the current value
Prefers reduced motion: unsupported 1