Open your Mobile Menus and Disable Background Scrolling

mobilemenu.css

#mobile_menu_content { 
  position: fixed; 
  top:100px; /* the height of your menu button div */
  left:0; 
  width: 100%; 
  height: 100%; 
  z-index: 6; 
  background-color: rgba(0,0,0,0.90); 
}

#mobile_wrapper { 
  position: absolute; 
  top:0; 
  left:0; 
  width: 100%; 
  height:1000px; /* override height in js for accurate scrolling*/
  overflow-y:scroll;
}

OpenMobileMenu-DisableBGScroll.js

$(document).ready(function() {
    
    function closeMobileMenu() {
        
        var mobileContent = $("#mobile_menu_content");
        // now `unlock` the body contents and put things back to
        // normal before fading out the mobile menu.
        var bodyTemp = $('.body_temp');
        var scrolltop = Math.abs(bodyTemp.position().top);
        
        $('#body_wrapper').append(bodyTemp.contents());
        bodyTemp.remove();
        
        $("body").scrollTop(scrolltop);
        mobileContent.fadeOut("slow", function() {
            slideUpAllMobileMenusExcept(null);
        });
    }

    function openMobileMenu() {
        
        var mobileContent = $("#mobile_menu_content");
        
        // get the current scroll position, and then `lock` the body
        // contents in a div that won't scroll. This prevents the background from
        // scrolling when the mobile menu is open.
        var scrolltop = $(window).scrollTop();
        $("<div class='body_temp' />")
        	.append($('#body_wrapper')
                .contents())
        	.css('position', 'fixed')
        	.css('top', "-" + scrolltop + 'px')
        	.width($(window).width())
        	.appendTo('#body_wrapper');
        
        // fade in the mobile menu
        mobileContent.fadeIn("slow");
    }
    
});

If the background-image is resizing on initial scroll, I assume the element with that background must have a dynamic height, generated using either vw/vh in the CSS or JS/jQ script. I ran into this same problem, and I found what I believe to be the correct method in resolving this issue (at least until mobile browsers provide their own workaround).

Using a simple jQuery function, you can store the window's width on page load, and use that to restrict the container's resizing function to viewport sizes wider than the desktop breakpoint (992px+) and narrower viewports so long as the viewport width changes, not just the height. This way, on mobile and tablet devices, when you scroll, there is only a vertical viewport resize, so the resize function is not triggered.

var breakpoint = 991;
var bgHeight = function() {
    $('#bg').css('height', $(window).height() + 'px');
}; bgHeight();
var windowWidth = $(window).height();
$(window).on('resize', function() {
    if ((($(this).width() <= breakpoint) && ($(this).width() != windowWidth))
        || ($(this).width() > breakpoint)) {
        bgHeight();
    }
    windowWidth = $(window).width();
});

CodePen: https://codepen.io/brandonmcconnell/pen/jayYbB