Jumpy behavior on Android

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

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.