paulirish/matchMedia.js

matchMedia.addListener doesn't fire when media query transitions from matched to unmatched

Closed this issue · 2 comments

WickyNilliams commented

The addListener polyfill does not work exactly as one would expect.

If the media query transitions from an unmatched to a matched state, the callback is fired. If the query transitions from a matched state to an unmatched state, the callback is not triggered.

Here's a fiddle to demonstrate the issue: http://jsfiddle.net/WickyNilliams/uwB5B/

Of course the above should be tested in IE9 or something. Alternatively, this version I've just removed the guard clauses around the polyfills so it should be demonstrable in any browser: http://jsfiddle.net/WickyNilliams/uwB5B/1/

In simple terms the following code will never be reached:

matchMedia("screen and (min-width:1px)").addListener(function(mql) {
   if(!mql.matches) {
      alert("you ain't seen me, right?!");
   }
});
WickyNilliams commented

See pull request for fix, will close this for now