Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

WickyNilliams opened this Issue Jan 7, 2013 · 2 comments


None yet
1 participant

WickyNilliams commented Jan 7, 2013

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 Jan 12, 2013

See pull request for fix, will close this for now

@scottjehl scottjehl pushed a commit that referenced this issue Jan 14, 2013

Scott Jehl Merge pull request #28 from WickyNilliams/master
Add support for match -> unmatch transition, fix for #27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment