Android Browser Triggers jQuery $(window).resize() on scrolling

Question

I have recently come across something quite wierd, I'm not sure if it's maybe me just missing something but I can't understand why this is happening.

I have a site that has the following jQuery snippet running on it:

$(window).resize(function(){
  alert("Resize fired!");
});

When I go to the site on an Android phone browser, and simply scroll up and down the site, I can see the alert.

The Android browsers scroll bars (which fade in and out) are overlayed ontop of the entire site and don't seem to cause any resizing of the window, so I'm guessing this event isn't being fired by them.

Does anyone know why the Android browser is firing this event on scrolling?

Any information will be greatly appreciated.

EDIT:

I have tried setting CSS for body, setting overflow-y to scroll to see if that was a viable solution but the event is still being fired on scrolling on Android.

EDIT #2:

I am using the following metatag in my HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

I'm having a similar strange issue on ios (see http://stackoverflow.com/questions/14157942/orientationchange-event-fires-scroll-resize-event). Have you tried a blank html (with the viewport meta in it) and only the resize alert? Does it still fire then? — Klaas Leussink, Jan 10 '13 at 15:50
@c_kick I can confirm that this happens on a blank HTML test page. I have managed to get around this by altering the behavior of my site but I can't find any information online as to why it does this — Dan, Jan 11 '13 at 09:26
What I'd try is bind to the `$(window).scroll` event, and set a `$(window).resize(function(e) { e.stopPropagation(); }` while scrolling is happening. But I heatedly agree with you that this is annoying and should not require a workaround. — Klaas Leussink, Jan 11 '13 at 09:37
From my testing, it looks as if this is happening because the browser interface at the top of the device is appearing and disappearing, *not* the scrollbar. Hence, widths are not the issue. — John McCollum, Sep 26 '13 at 12:48

chilljul · Accepted Answer · 2013-05-09T04:16:56.900

I was having the same problem, my solution was to check if the window size actually changed, for doing it I needed to store the past window width somewhere in my app. The code could be something like this:

$(window).resize(function() {
  clearTimeout(app.resize.timer)
  app.resize.timer = setTimeout(function(){
     var window_changed = $(window).width() != app.size.window_width
     if(window_changed) console.log('Window size changed! resize site')
  }, 500)               
})

I did not count on the window height because my Android browser hides and shows the address textbox when I scroll down the site making the window height change on vertical scroll

score 3 · Answer 2 · answered Feb 06 '15 at 03:57

@john-mccollum is correct in the comments. It appears to be the disappearing browser interface causing a change in height that triggers the resize event. So check for change in width specifically in your function if you are doing responsive design stuff where you want to check if the width has been resized.

$(window).resize(function(){
    var w = $(window).width();
    if (typeof checkw == 'undefined') checkw = w;
    if (w!=checkw) {
        console.log("The width changed from "+checkw+" to "+w);

        // do your responsive magic!

        checkw = w;
    }
});

Not required to make this work, but this pairs well with the Paul Irish / John Hann "smartresize" method.

score 1 · Answer 3 · edited May 23 '17 at 10:29

i'm having the same problem too!
the problem is true because the height of the browser in Android will change when the url bar hide and show. So, we have to make the browser reload only happens when the width size changes.

i saw this question in Stackoverflow show me how to do this. And this is the jsfiddle.

      var doit;
      function resizedw(appwidth){
          var window_changed = $(window).width() != appwidth;
          if ($(window).width() != appwidth){
            ("body").append("did it"+appwidth+" ");
          }
          past_width = $(window).width();
      }

      var past_width = $(window).width();
      window.onresize = function() {
        clearTimeout(doit);
        doit = setTimeout(function() {
            resizedw(past_width);
        }, 100);
      };

Android Browser Triggers jQuery $(window).resize() on scrolling

3 Answers3