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

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

• javascript
• jquery
• html
• cross-browser
• mobile-safari

• possible duplicate of iphone/ipad triggering unexpected resize events – Rizky Fakkel Commented Apr 29, 2015 at 10:26

3 Answers 3

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

    });

});

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

This issue specific to ios, if any handler which changes size of anything in window, will trigger resize event, and sometimes it will get stuck in infinite resize call. So as mentioned above, have one condition which compares previous width with current width if both are equal then return.