Enquire match & unmatch

by Travis

HTML

<div class="target">
    <h1>Chrome 26/27 Browser Re-size Issue</h1>
    <p>First, open the console for the result window. I've put in a couple console.log()'s to show when match and unmatch are firing. Resize the result window from large to small. The slower you resize the window when crossing over to the match breakpoint the more times match/unmatch fire. This is probably because the slower you resize the window the more times to browser calculates the browser width.</p>
    <p><b>ALSO! It is worth noting that this only seems to happen when the content is longer than the viewing area on the page (requiring a scrollbar). So, if you remove the majority of these paragraphs and the content on the page fits within the viewing area without scrolling you will see that enquire fires perfectly when the browser is resized!</b></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nunc sem. Aenean luctus tellus quis elit dictum ac dictum sem ultrices. Duis faucibus consectetur odio vitae aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in mi orci, a tincidunt eros. Proin tincidunt lacinia tristique. Pellentesque tincidunt tellus elit, a gravida diam. Cras non urna tortor. Vivamus nec mauris vel enim varius rutrum quis nec ligula. Suspendisse in faucibus sapien. Vivamus at metus justo. Morbi ac enim est, eget tincidunt purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut bibendum imperdiet cursus. Donec volutpat blandit metus, non congue risus molestie id.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nunc sem. Aenean luctus tellus quis elit dictum ac dictum sem ultrices. Duis faucibus consectetur odio vitae aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in mi orci, a tincidunt eros. Proin tincidunt lacinia tristique. Pellentesque tincidunt tellus elit, a...

CSS

h1 {font-size:30px; margin:0 0 20px 0;}
p {margin:0 0 20px 0;}
.matched {
    background-color: red;
}

JavaScript

// enquire.js v2.0.1 - Awesome Media Queries in JavaScript
// Copyright (c) 2013 Nick Williams - http://wicky.nillia.ms/enquire.js
// License: MIT (http://www.opensource.org/licenses/mit-license.php)

(function(t){"use strict";function i(t,i){var s,n=0,e=t.length;for(n;e>n&&(s=i(t[n],n),s!==!1);n++);}function s(t){return"[object Array]"===Object.prototype.toString.apply(t)}function n(t){return"function"==typeof t}function e(t){this.options=t,!t.deferSetup&&this.setup()}function o(t,i){this.query=t,this.isUnconditional=i,this.handlers=[],this.mql=h(t);var s=this;this.listener=function(t){s.mql=t,s.assess()},this.mql.addListener(this.listener)}function r(){if(!h)throw Error("matchMedia not present, legacy browsers require a polyfill");this.queries={},this.browserIsIncapable=!h("only all").matches}var h=t.matchMedia;e.prototype={setup:function(){this.options.setup&&this.options.setup(),this.initialised=!0},on:function(){!this.initialised&&this.setup(),this.options.match&&this.options.match()},off:function(){this.options.unmatch&&this.options.unmatch()},destroy:function(){this.options.destroy?this.options.destroy():this.off()},equals:function(t){return this.options===t||this.options.match===t}},o.prototype={addHandler:function(t){var i=new e(t);this.handlers.push(i),this.matches()&&i.on()},removeHandler:function(t){var s=this.handlers;i(s,function(i,n){return i.equals(t)?(i.destroy(),!s.splice(n,1)):void 0})},matches:function(){return this.mql.matches||this.isUnconditional},clear:function(){i(this.handlers,function(t){t.destroy()}),this.mql.removeListener(this.listener),this.handlers.length=0},assess:function(){var t=this.matches()?"on":"off";i(this.handlers,function(i){i[t]()})}},r.prototype={register:function(t,e,r){var h=this.queries,a=r&&this.browserIsIncapable;return h[t]||(h[t]=new o(t,a)),n(e)&&(e={match:e}),s(e)||(e=[e]),i(e,function(i){h[t].addHandler(i)}),this},unregister:function(t,i){var s=this.queries[t];return s&&(i?s.removeHandler(i):(s.clear(),delete...