Mobile Chrome fires resize event on scroll

Question

I'm using the Chrome mobile browser on Galaxy S4, Android 4.2.2 and for some reason every time I scroll the page down, it fires a resize event verified by the scaling of images from a jquery.cycle2 slideshow.

Any idea why this might be happening?

It ended up being a problem with the resize event but because my element height was set to 100% of the viewport, it was being recalculated on scroll. — KobeBryant, Jun 26 '13 at 20:58

CWitty · Answer 1 · 2019-06-18T15:03:39.927

83

That sounds strange, but I have seen it in other browsers. You can work around this like so.

var width = $(window).width(), height = $(window).height();

then in your resize event handler you can do.

if($(window).width() != width || $(window).height() != height){
  //Do something
}

I don't know the scope of your functions and all that, but you should get the gist from this.

edited Jun 18 '19 at 15:03

answered Jun 26 '13 at 19:29

CWitty

4,488
3
23
40

18

The problem is caused by the scrollbar hiding or showing, causing the height of the screen to change, hence triggering the `$(window).resize()`. I've suggested an edit. – Sander Koedood Jun 25 '15 at 08:50
4

Just wanted to add that we also observed similar behavior with iOS Safari. – Kris Krause Jul 21 '15 at 18:32
4

since it's the height that's changing the if condition should only check for change in width. Also the condition is not trigger until width and height both have changed. which is not always the case but almost all screen re-size involve change in width so I suggest not to use height part. `if($(window).width() != width){ }` – Imran Bughio Jan 25 '16 at 04:23
8

it should be || instead of && – Maysam Torabi Nov 29 '16 at 02:29
One of the most wierd things ever happened to me! Yes the correct answer is to filter only width resize as Imran Bughio suggested! – centurian Jun 15 '19 at 21:02

AlbertoFdzM · Accepted Answer · 2021-04-26T10:06:21.547

59

Just for curiosity, I was trying to reproduce it and if I'm correct this is caused by the navigation chrome bar.

When you scroll down and chrome hides the browser navigation bar it produces a window resize, but this is correct, because after that we have a bigger window size due to the free space that the browser nav bar has left.

Related article: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Consider CWitty answer to avoid this behavior.

edited Apr 26 '21 at 10:06

answered Jan 15 '15 at 15:05

AlbertoFdzM

1,023
11
24

3

Whether it is an intended behaviour or not, we don't want it to fire the resize function. So what's the solution here, without going down the route of a long winded code that other answers have suggested? – Studocwho Dec 24 '17 at 15:46
I've added a link to my answer providing more info about how to deal with this behavior on Chrome for mobile. – AlbertoFdzM Jan 06 '18 at 17:54
Simplest approach is to compare height vs width after your viewport listener has fired. If only height has changed, then it's highly likely a native browser toolbar is affecting viewport height. If there's a case that a user would affect viewport dimensions by height only, then you could go further and analyze distance and time to discern if it's user input or system input which is changing the viewport. – Kalnode Nov 04 '20 at 16:45
1

@MarsAndBack but isn't that too much to analyze whether system or user has changed the height by adding more calculations? question here is to avoid resize when too many resize handlers coming via different scripts and only because urlbar shifts. – Shashank Bhatt Jan 12 '21 at 18:26
@ShashankBhatt Yea, you're right to minimize number of overall calls, but when there's no other relevant data available from the device, you're left with few options. For my particular app, it made sense to do this in one particular crucial context. Anyhow, unless there's universal standards for this, we're left to the goodwill and lagging foresight of the device manufacturer. – Kalnode Jan 12 '21 at 18:44
@MarsAndBack i am facing one strange issue in mobile chrome that on scrolling reverse direction, even viewport height becomes smaller than smallest possible height. So lets say i have xiomi 6 pro and onresize. height can become among 705px, 694px and 638px while theoretically it should become only first two of values. when this happens, fixed positioned bottom button goes out of viewport/jumps 56px above for a milisecond. – Shashank Bhatt Jan 13 '21 at 17:27
Sorry 750px(not 705) in above comment. – Shashank Bhatt Jan 13 '21 at 17:47

score 6 · Answer 3 · answered Dec 21 '14 at 07:55

I don't know is it still interesting, but My solution is : )

var document_width, document_height;

$(document).ready(function()
{
 document_width=$(document).width(); document_height=$(document).height();
    // Do something
}

$(window).resize(function()
{
    if(document_width!=$(document).width() || document_height!=$(document).height()) 
    {
        document_width=$(document).width(); document_height=$(document).height();
        // Do something
    }
}

I think you should use $(window).height() not $(document).height() , and width. — Tarek El-Mallah, Mar 23 '17 at 17:48

score 3 · Answer 4 · answered Jan 08 '18 at 18:43

Browsers in mobile devices often hide their horizontal top navigation bar when someone scrolls down, and show it again when scrolling up. This behavior affects the size of the client, firing the resize event. You just need to control not executing your code because of height changes or, at least, because of that height change.

score 2 · Answer 5 · answered May 17 '16 at 21:20

Turns out there are many things which can fire resize in various mobile browsers.

I know it's not ideal to link to an external resource, but QuirksMode has a readable table that I don't want to duplicate (or maintain) here: http://www.quirksmode.org/dom/events/resize_mobile.html

Just to give an example, the one that was getting us: apparently in many browsers, opening the soft keyboard fires the event.

Anders Gardebring · Answer 6 · 2013-07-30T17:54:25.747

The question has already been answered, but since this question do not bring up the question of responsive sites I would like to add some information on that.

I encountered this issue in Chrome on android when developing a responsive web site. When resizing the window I want to hide the menus (due to some design elements needing proper positioning) but the Chrome for android behaviour to trigger a resize event on scroll made that somewhat difficult..

Switching to start using onOrientationChange was not an option since this is a responsive site, there is no orientation change on a desktop PC, but I still needed the code to work on both regular PC:s, tablets and smartphones.

I could had started to do browser sniffing and such but I have so far been able to avoid that..

I tried to implement the solution suggested by CWitty but since scrolling up or down in fact triggers a height-change that did not work either.

I ended up adding a condition that only hides the menu when the width is changed, not when the height has changed. This works in my case since I only need to rewrite the menu when the width is changed.

my suggestion would be to omit checking the height, and check only the width. — Bertie, Jun 29 '14 at 14:51
The accepted answer still applies; it's up to you to continue the logic according to your needs. Ultimately, you discovered this yourself, and this should just be a comment under the accepted answer. — Kalnode, Nov 04 '20 at 16:48

score 0 · Answer 7 · edited May 23 '17 at 11:55

0

This is a duplicate of Javascript resize event on scroll mobile

In order to fix it, use onOrientationChange and window.orientation property. See the related answer: here

edited May 23 '17 at 11:55

Community

1
1

answered Jun 26 '13 at 19:28

Braden

1,548
2
12
20

Incorrect. This question is about the resize event firing unexpectedly in a mobile browser. – user2867288 Jan 13 '15 at 18:21
5

Actually, this isn't necessarily incorrect. using onOrientationChange is a legitimate workaround since on a mobile device that's when you're most likely to see a screen resize event fire. This answer is fine. I'm not upvoting it simply because there's another case that this won't catch - and that's when browser chromes appear/disappear causing resize events (which is my problem ATM). Otherwise this would be a fine solution. – dudewad Oct 06 '15 at 18:39
Suppose you should catch resize events to adjust elements on screen; you open your developer tools and everything works just fine with window resizing, you can even scroll up-down! Now, you decide to open the page on a tablet, you scroll up-down and everything is re-adjusting giving earthquakes on your screen! You still need to handle window resize events though at your PC! So, this is not a correct answer! – centurian Jun 15 '19 at 20:56
I was using window.resize to track the orientation change. Thus facing this issue. This is a great idea. – A.M.N.Bandara Jul 10 '20 at 11:03
There's no proper sample code in the answer or even in the linked answer, and the external links are dead. In any case, the OP question deals with basic scrolling, with no orientation change, where a resize event is being triggered regardless of orientation. Simply checking for height change is the most efficient universal thing to do. `onOrientationChange` is useful elsewhere.. – Kalnode Nov 04 '20 at 17:09

Mobile Chrome fires resize event on scroll

7 Answers7

Linked