2

Using full width and full height on background images for sections of my site but I'm experiencing some jumpy behavior on Android. I'm using modernizr to detect touchevents and changing the background-attachment from fixed to local. Here is the site and below is the css that I'm using:

.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
    height: 100vh;
    min-width: 100%;
    color: $white;
    display: table;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

// if a touchevent is detected

.touchevents {

    .intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
        background-attachment: local;
    }
}
brandozz
  • 1,059
  • 6
  • 20
  • 38
  • Not entirely sure, but I think the problem is caused by the `height: 100vh;` and `background-size: cover;` combination. As you scroll down, the "header" part of the android Chrome browser disappears. So the element becomes a bit taller and the background-image is stretched more to cover the element. Had this problem on one of my projects. – ezattilabatyi Jan 17 '16 at 22:30
  • @shirfy - Yeah that's what I was thinking as well. I changed background-attachment: local and height: 100%. It seems to be working a little better. – brandozz Jan 17 '16 at 23:30
  • 1
    Not the best solution but I would leave the css as it is and set the elements' height with js after the page loads. – ezattilabatyi Jan 18 '16 at 00:25
  • Yeah, that seems to have done the trick. – brandozz Jan 18 '16 at 02:44
  • If this is a good enough solution for your case, then I'll write an answer. – ezattilabatyi Jan 18 '16 at 17:11
  • Please do, I will mark it as a working solution. – brandozz Jan 18 '16 at 22:57

1 Answers1

1

The problem was caused by these two properties combined with the Chrome for Android browser's behavior:

CSS:

.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
    height: 100vh;
    background-size: cover;
}

As the user scrolls down the browser's top toolbar will disappear, thus the five elements will gain height. Because the background-size is set to cover the image will have to quickly stretch as well.

SOLUTION

I couldn't test it on a mobile device, but adding transition to the height property might solve the issue.

.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
    -webkit-transition: height 0.2s linear;
    transition: height 0.2s linear;
}

If it doesn't help, there's a jQuery solution which would set the height of these elements on page-load and on window resize so the background wouldn't jump every time the top toolbar disappears.

jQuery:

(function($) {
    var elements = $('.full-height');

    function elementHeightFix() {
        var windowHeight = $(window).height();

        elements.each(function() {
            $(this).css('height', windowHeight);
        });

    }

    $(window).resize(function() {
        elementHeightFix();
    });

    elementHeightFix();
}(jQuery));

For the sake of simplicity I used a single selector, you can store the selectors in an object and iterate through them. Please note that I mainly use CoffeeScript and TypeScript, so my pure jQuery code might be messy.

ezattilabatyi
  • 357
  • 1
  • 2
  • 11