CODEWITHSUNDEEP
javascriptjqueryhtmlcross-browsermobile-safari
Mapsism Borja
Mapsism Borja

Reputation: 363

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

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

Upvotes: 11

Views: 16679

Answers (3)

Rizky Fakkel
Rizky Fakkel

Reputation: 9183

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

    });

});

Upvotes: 18

Bhagwati Malav
Bhagwati Malav

Reputation: 3549

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.

Upvotes: 0

Mohammad Rezaei
Mohammad Rezaei

Reputation: 249

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

Upvotes: 7

Related Questions