Skip to main content

Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts

  • brandonmcconnell
    Participant

    @sztojka has the closest solution so far, but this will still cover the full size of the selected element, so even using height: 100vh, that element’s height will still visibly change if it is at the top when the user initially scrolls in Chrome or Safari on mobile, thereby cuasing the background size to increase.

    I have, however, 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

Viewing 1 post (of 1 total)
icon-link icon-logo-star icon-search icon-star