$(window).resize() in safari : why it works also if scroll window (but doesn't resize)?

Question

i noticed, with safari on my iphone5 that

$(window).resize()

it works strangely...

i have this code:

$(document).ready(function () {
 $(window).resize(function() {
     avviaChart();
     initialize();
     if($('#time').is(':checked')){ 
         $("#time").removeAttr('checked');
         $("#Time").css('border','2px solid #ffffff');
     }  
  });   
});

this code should work only when sizes of window change.... with other browser work very good, but with safari the code works also if i scroll the page (and the sizes of window doesn't change)...

HOW IS POSSIBLE ? O.o

Answer 1

As you see, in iphone/ipad and android devices, when you scroll down the page, address bar will be small and when scroll to top address bar size will be return to the actual size, this operation fires window.resize event

Answer 2

This is a known bug that happened from iOS6 Safari. The resize event fires randomly while scrolling. Fortunately it's not a jQuery issue.

This answer to a similar problem might solve your issue as well.

For the lazy:

3Stripe posted that you should "Store the window width and check that it has actually changed before proceeding with your $(window).resize function"

His code snippet:

jQuery(document).ready(function($) {

    /* Store the window width */
    var windowWidth = $(window).width();

    /* Resize Event */
    $(window).resize(function(){
        // Check if the window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($(window).width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $(window).width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});