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?

Etamine

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. – Etamine

Answer 1

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.

Felt

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? – Lock

I've added a link to my answer providing more info about how to deal with this behavior on Chrome for mobile. – Felt

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. – Nyasaland

@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. – Dendro

@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. – Nyasaland

@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. – Dendro

Sorry 750px(not 705) in above comment. – Dendro

Answer 2

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.

Lieb

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. – Felicidadfelicie

Just wanted to add that we also observed similar behavior with iOS Safari. – Millican

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){ } – Gigantes

it should be || instead of && – Preparatory

One of the most wierd things ever happened to me! Yes the correct answer is to filter only width resize as Imran Bughio suggested! – Unquestionable

Answer 3

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
    }
}	

Daradarach

I think you should use $(window).height() not $(document).height() , and width. – Tetryl

Answer 4

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.

Dent

Answer 5

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.

Ericerica

Answer 6

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.

Dissident

my suggestion would be to omit checking the height, and check only the width. – Convict

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. – Nyasaland

Answer 7

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

Misgive

Incorrect. This question is about the resize event firing unexpectedly in a mobile browser. – Boreal

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. – Animadvert

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! – Unquestionable

I was using window.resize to track the orientation change. Thus facing this issue. This is a great idea. – Kin

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.. – Nyasaland