Internet Explorer 8 and window resize event

Which browsers do you support these days?  Within my company, staff use of Internet Explorer 7 and older has dwindled to nothing.  However, there is a healthy contingent of staff who are still plugging on with Internet Explorer 8 - so we must continue to support it.

In general, it works pretty well - although obviously without support for a lot of newer technologies.  One piece of missing functionality is the CSS3 calc() function.  This being such a useful tool for deploying responsive templates/layouts, we wrote a JavaScript function that mimics the same functionality on core elements of our template, triggered on the jQuery window resize event for browsers that don't support calc().

Although functionally, it worked fine, we noticed a load of graphical glitches when running on IE8, especially during animations and transitions (sliding panels, fading transitions etc.). Adding a bit of debug code, we noticed that the window resize event was being triggered whenever the size of an element on the page was altered. Hence, the resize function was being called repeatedly (and continuously on some pages) - even when the window hadn't changed size at all.

The fix I used is here:

 (function ($) {  
   var intCurrentWidth = $(window).width(); var intCurrentHeight = $(window).height();  
   $(window).resize(function () {  
     if ($(window).width() != intCurrentWidth || $(window).height() != intCurrentHeight) {  
       intCurrentWidth = $(window).width(); intCurrentHeight = $(window).height();  
       // execute screen resize code  
     }  
   });  
 });  

This code will check whether the window has actually changed width and/or height, before executing the resize code.

Comments