Mobile Chrome Fires Resize Event on Scroll

mobile chrome fires resize event on scroll

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.

$(window).resize() executes when scrolling on mobile devices

The problem with mobile devices is that they have the browser toolbars that are hidden when you scroll and this leads to screen change (activates the resize event) and this means that you have to make some validations to your code and detect why was the resize event fired.

One way I have used is by saving the window width and checking if the correct window width is the same or changed. If it changes then it means that the append should happen (in your case).

var dwidth = $(window).width();

$(window).resize(function(){
    var wwidth = $(window).width();
    if(dwidth!==wwidth){
         dwidth = $(window).width();
         console.log('Width changed');
    }
});

Mobile scroll fires jQuery resize event - (it only fires when using mobile, ok in browser viewport)

I found out the answer in StackOverflow itself link of the solution. it's the answer by sidonaldson that helped me solve my issue.ty

Here is the code

var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });

JavaScript resize event on scroll - mobile

Use the onOrientationChange event and the window.orientation property instead.

Also see this answer.

Here link to a test page.

Resize triggers on scrolling in mobile & scrolls layout back to top

In jQuery v1.12.4 I added some code which will check the fired event if is 'resize' then check if width and height were changed and only then fire the event otherwise ignore.

Added this at the top of file for global variables:

var gWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var gHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

In the middle of jQuery file:

    if ( !( eventHandle = elemData.handle ) ) {
        eventHandle = elemData.handle = function( e ) {

            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded

            // Custom code for detecting and pausing resize
            if(e.type == 'resize'){

                var tempHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                var tempWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

                if(Math.abs(gHeight - tempHeight) > 100  || gWidth != tempWidth){
                    gWidth = tempWidth;
                    gHeight = tempHeight;
                    return typeof jQuery !== "undefined" &&
                        ( !e || jQuery.event.triggered !== e.type ) ?
                        jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                        undefined;
                }else{
                    return false;
                }
            }else{
                return typeof jQuery !== "undefined" &&
                        ( !e || jQuery.event.triggered !== e.type ) ?
                        jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                        undefined;
            }
            // Custom code end.

        };

Note that I am using Math.abs to see if the new height is at least 100px of different because mostly the height changes due to appearance and disappearance of address bar.

Frankly speaking jQuery should have at-least the width change check in it for resize event.

iphone/ipad triggering unexpected resize events

Store the window width and check that it has actually changed before proceeding with your $(window).resize function:

jQuery(document).ready(function($) {

    // Store the window width
    var windowWidth = $(window).width();

    // Resize Event
    $(window).resize(function(){

        // Check 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

    });

});

---

Related Topics