I use Modernizr 2.6.2 on the site in development and experience a disappointing bug in IE8. I load Modernizr at the beginning of the document:
<script src="js/vendor/modernizr-2.6.0-ck.js"></script>
Then I load the base.js file at the bottom of the page just before the closing </body> . In this base.js file, I have the following code ( Hastebin link for readability ):
/** * Non-jQuery hasClass function for checking the existence of * class names on elements. * @param {string} scripts The string of scripts to check * @param {string} cls The class name we're looking for * @return {boolean} True or false */ /* function hasClass(scripts, cls) { var r = new RegExp('\\b' + cls + '\\b'); return r.test(scripts); }*/ /** * Get ID from <body> tag */ function matchBodyID(match) { return match.toLowerCase() === document.body.id.toLowerCase(); } /** * Check to see if the body tag has a "data-scripts" attribute. * If true, collect the contents. If false, set to false. */ // var dataScripts = document.body.getAttribute("data-scripts") || false; /** * Variables must be defined before we can use them. */ var Modernizr = Modernizr || {}, ScaleText = ScaleText || {}; /* * Using Modernizr.load, we can run our tests to see * which features are available to us and load our * polyfills to handle those that aren't */ var timestamp = new Date().getTime(); Modernizr.load([ { load: [ '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', 'js/plugins/image-array-ck.js?t=' + timestamp, 'js/plugins/jquery.debouncedresize-ck.js', 'js/plugins/menu-ck.js?t=' + timestamp ], complete: function () { if (!window.jQuery) { Modernizr.load('js/vendor/jquery-1.8.1.min.js'); } ScaleText.invoke(); $("#skip-to-content").bind("click.menu", function (event) { event.preventDefault(); var $this = $(this), $par = $($this.parent()); $par.toggleClass("open"); }); } }, { test: matchBodyID('home') || matchBodyID('department'), yep: [ 'js/plugins/spin.min.js', 'js/slideshow-ck.js', 'css/royalslider/royalslider.css', 'css/royalslider/rs-minimal-white.css', 'js/plugins/tabs-ck.js?t=' + timestamp, 'js/plugins/underscore-min.js' ] }, { test: matchBodyID('interior'), yep: [ 'js/plugins/spin.min.js', 'js/plugins/tabs-ck.js?t=' + timestamp, // 'js/plugins/menu-ck.js?t=' + timestamp, 'js/plugins/underscore-min.js' ] }, // Check for iOS { test: Modernizr.appleios, yep: [ 'js/plugins/ios-ck.js' ] }, // Functional polyfills { test: Modernizr.flexbox, nope: ['js/polyfills/flexie.js'] } ]); /* * ScaleText * An attempt to create a custom type scaler for * large type that needs to scale to fit its parent */ ScaleText = { invoke: function () { $(".scalable").each(function (index, element) { var $parent = $(element), $wrapper = ScaleText.wrapIt($parent.first("div")); $parent.css({ "overflow": "hidden", "opacity": 0 }); $wrapper.css({ "-webkit-transform-origin": "left top", "-moz-transform-origin": "left top", "-ms-transform-origin": "left top", "-o-transform-origin": "left top", "transform-origin": "left top" }); ScaleText.checkSize($parent, $wrapper); jQuery(window).on("debouncedresize.ScaleText", function () { ScaleText.checkSize($parent, $wrapper); }); }); }, checkSize: function ($parent, $wrapper) { var scrollWidth = $parent[0].scrollWidth, width = $parent.width(), scrollHeight = $parent[0].scrollHeight, height = $parent.height(), ratio, wRatio, hRatio; wRatio = width / scrollWidth; hRatio = height / scrollHeight; ratio = (wRatio < hRatio) ? wRatio : hRatio; $wrapper.css({ "-webkit-transform": "scale(" + ratio + ")", "-moz-transform": "scale(" + ratio + ")", "-ms-transform": "scale(" + ratio + ")", "-o-transform": "scale(" + ratio + ")", "transform": "scale(" + ratio + ")" }); $parent.css({ "opacity": 1 }); }, wrapIt: function (element) { var content = $(element).html(), $wrapper = $("<div>" + content + "</div>"); $(element).empty().append($wrapper); return $wrapper; } };
For some reason, IE8 is completely choking in the Modernizr.load block, saying only Object doesn't support this property or method . Screenshot attached.
Ideas around why this might happen?
EDIT
I must mention that I am using the custom assembly Modernizr: http://www.hastebin.com/fitaqireha.coffee
