MatchMedia matches only when scaling the window down

[piffpaffpuff]

Three media queries: first has 2, the other 3 and the last 4 columns.

While resizing the browser window down the mql.matches is correct. But if you resize it up again mql.matches always returns false. ie: it stays in 2 columns instead of switching to 3.

Tested with latest chrome, safari and firefox

[fourroses666]

I noticed the same.

[piffpaffpuff]

I found out that it works better if your media queries have both, a min-width and max-width.

[vaughnroyko]

A workaround I was able to do for this was specifically calling rescanMediaQueries on a window resize. Example using jQuery:

$(window).on('resize', function() {
    salvattore.rescanMediaQueries();
});

[eheiser]

Noticed this too but the above fix worked fine for me.

[Soundvessel]

To improve the JS performance of the workaround consider wrapping it in a debouncer or done resizing event solution like https://css-tricks.com/snippets/jquery/done-resizing-event/