$(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

possible duplicate of [iphone/ipad triggering unexpected resize events](http://stackoverflow.com/questions/8898412/iphone-ipad-triggering-unexpected-resize-events) — Rizky Fakkel, Apr 29 '15 at 10:26

score 17 · Accepted Answer · edited May 23 '17 at 12:01

17

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

    });

});

edited May 23 '17 at 12:01

Community

1
1

answered Apr 29 '15 at 10:24

Rizky Fakkel

8,703
1
14
20

in the various tests I had come almost to the solution! Thank you! – Mapsism Borja Apr 29 '15 at 10:52
2

I'm not sure what version this was introduced in, but in Mobile Safari 7+, when scrolling the page up, Safari minimizes the browser controls, which causes the viewport size to change. This answer is the only viable answer that I've found. I now just store the width, height and orientation in my main namespace as part of the initialization. – Craig Jacobs Dec 24 '15 at 19:07
Glad I could help Craig! :) – Rizky Fakkel Dec 31 '15 at 15:46
I wouldn't call it a bug - the browser IS resizing the viewport and re-rendering content. There are situations where developers might want to account for this behaviour, and firing a resize event allows us to deal with it. We've been spoilt for too long assuming resize always relates to a change of width. – Anthony Manning-Franklin Nov 18 '16 at 04:06
1

Right now it makes no sense for me to say that content resizes while scrolling. I'd also say that you can deal with any resizing issues by checking window width after a scroll event is fired. Out of curiousity, could you name an example where a resize() fired because of scrolling could help a webdeveloper deal with a certain issue? You state that we assume resizes relate to a change of width, but it partially does. Resize events are fired when the document view is resized. I currently wonder how scrolling resizes the document view. – Rizky Fakkel Nov 19 '16 at 19:13
I have already tried this but it could not resolve my problem. – Ankur Gupta Sep 14 '17 at 12:09

Mohammad Rezaei · Answer 2 · 2016-02-10T08:43:19.453

7

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

edited Feb 10 '16 at 08:43

answered Feb 10 '16 at 08:38

Mohammad Rezaei

241
3
16

this sounds logic, now I can understand why this is still happening on iOS 9 – bluantinoo Jul 15 '16 at 12:04

score 0 · Answer 3 · answered Dec 09 '16 at 01:37

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.

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

3 Answers3