css transition: trigger transitionend not firing w

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 reported he could not close the menu once he opened it. He had 2 installations where this problem occurred and further i had no reports. I finally found the cause of the problem. There is a setting in the accessibility settings of one's OS to "disable or reduce" transitions or animations. (See screen prints.) The funny part is: in Windows only Firefox does obey this setting: IE11, Edge & Chrome ignore it and my menu works like a charm. In OS X: Both Safari and Firefox have broken menu's when this option is enabled. Chrome does the ignore trick.

Here's my question. Has anyone experienced this before and how can i detect wether a user has enable this "reduced animation" option. In this case i will have to remove the menu in another way from the screen....

Windows 10:

OS X:

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

<h2>Using JavaScript to access the current value</h2>
<div id="indicator">Prefers reduced motion: <span id="prmValue">unsupported</span> <a href="https://webkit.org/b/168491" title="Outstanding bug: 168491" aria-label="Outstanding bug: 168491"><sup>1</sup></a></div>