Why does onresize fire when it shouldn't at low zoom levels in IE8?

Question

I wrote some jquery to resize elements and close all open popups on my page when the browser window is resized:

    addEvent({
        target: window,
        eventListener: 'onresize',
        func: function (e) {
            resizeElements(); //This resizes loads of stuff
            closeAllPopups(); //Closes any open popups
        }
    });

This works fine at 100% zoom. However, at zoom levels less than 90% onresize keeps getting called, even when the window has not been resized. The effect is that popups won't open- they immediately close.

This only seems to happen on IE8. It works fine for Chrome.

Any ideas why this is happening- Is it simply an IE8 bug? Can anyone suggest a fix or a workaround?

Answer 1

What about checking the window original size and re-size size, then try to call your function?

So, even if you are in 90% view on load, this window size will be original size and only when you resize (under 90% view), your functions will be called?

$(document).ready(function(){
    var original_width = $(window).width();
    var original_height = $(window).height();

    $(window).resize(function() {
        var resize_width = $(window).width();
        var resize_height = $(window).height();

        if(original_width != resize_width && original_height != resize_height){
            alert('You resized!');
            // resizeElements(); //This resizes loads of stuff
            // closeAllPopups(); //Closes any open popups
        }
    });
}); 

Answer 2

You could try maybe to debounce it using a timer:

addEvent({
        target: window,
        eventListener: 'onresize',
        func: function (e) {
            clearTimeout(window.resizeTimeout);
            window.resizeTimeout = setTimeout(function(){
                resizeElements(); //This resizes loads of stuff
                closeAllPopups(); //Closes any open popups
            },50);
        }
    });

I'm using here global object window to set resizeTimeout variable but better would be to use a local variable.

Answer 3

There is no way to "fix" this bug in the browser itself, so you are just going to have to work-around having a resize event that constantly triggers. So roasted was right about using the time, but you are not looking for a timer. You need to store the time and then ensure that enough time has elapsed before the event is triggered again, like so:

var _interval = 1000;// milliseconds
var _resize = 0;
addEvent({
    target: window,
    eventListener: 'onresize',
    func: function (e) {
        if (Date.now() - _resize < _interval)
            return;
        _resize = Date.now();
        resizeElements(); //This resizes loads of stuff
        closeAllPopups(); //Closes any open popups
    }
});