parallax scrolling issue - div element jerking when scrolling in webkit browsers

Question

I have created a parallax scroll, which seem to be working fine in firefox however in the chrome browser there\'s a slight jump on the body text when scrolling. click here scrol

Answer 1

You are going to have to change the way that the scrolling works (i.e. change how the spacing is computed), but this can be fixed by adding the position:fixed CSS element to the page elements that are scrolling. The problem is coming from the time that it takes for the JavaScript to process and then render.

For example, on your page you would set each of the <div> tags containing text to have a fixed position and then use the JavaScript/JQuery function to update the top: CSS element. This should make the page scroll smoothly.

Answer 2

Some suggestions:

1.) Use position: fixed to avoid any jitter, as you'll be taking the element out of the document flow. You can then position it using z-index.

2.) Cache as much as you can to ease processing time.

3.) Math.round may not be necessary, but try adding this CSS to your moving areas: -webkit-transform: translate3d(0,0,0); This will force hardware acceleration in Chrome, which may ease some of the jittering. (It looked smoother on my screen when I added this with Inspector, but it didn't get rid of the jumpiness with the scroll wheel.) Note: Don't do this on your entire document (e.g. body tag), as it might cause some issues with your current layout. (Your navigation bar didn't stick to the top of the window, for instance.)

4.) If you have any animations running as part of your parallax logic (tweening the margin into place or something along those lines), remove it - that would probably cause the jump you see.

Hope this helps. Best of luck.

Answer 3

I see the same jittering in FireFox and Chrome (Mac). Looking at your containers, one thing that's glaring at me is the pixel position that's being calculated/used.

Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;">
FireFox: <div id="about-title" style="margin-top: 1562.4px;">

Browsers aren't going to allow content to sit at 1/2 pixel, let alone 0.3999999 of a pixel. I think it's moving it, and trying to calculate whether to round up or round down. It jitters because it's calculating with every click of your mouse wheel.

Thus, I'd try adding Math.round() to your positions so that the containers are never being left in limbo.

Take a look at the code here: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug some of the elements, and you'll see that their only fraction of a pixel is '0.5'. Most of them (the bulk) go to round number values.

Answer 4

Have you tried adding the preventdefault inside the scroll function?

$(window).scroll(function(e) {
    e.preventDefault();
    // rest of your code
}

Answer 5

In a previous question I created a fairly good parallax scrolling implementation. Jquery Parallax Scrolling effect - Multi directional You might find it useful.

Here's the JSFiddle http://jsfiddle.net/9R4hZ/40/ use the up/down arrows or scroll wheel.

Using padding and margin for the positioning are probably why you're experiencing rendering issues. While my code uses scroll or keyboard input for the effect you can loop the relavent portion and check the $moving variable until you reach the desired element on screen.

function parallaxScroll(scroll) {
    // current moving object
    var ml = $moving.position().left;
    var mt = $moving.position().top;
    var mw = $moving.width();
    var mh = $moving.height();
    // calc velocity
    var fromTop = false;
    var fromBottom = false;
    var fromLeft = false;
    var fromRight = false;
    var vLeft = 0;
    var vTop = 0;
    if($moving.hasClass('from-top')) {
        vTop = scroll;
        fromTop = true;
    } else if($moving.hasClass('from-bottom')) {
        vTop = -scroll;
        fromBottom = true;
    } else if($moving.hasClass('from-left')) {
        vLeft = scroll;
        fromLeft = true;
    } else if($moving.hasClass('from-right')) {
        vLeft = -scroll;
        fromRight = true;
    }
    // calc new position
    var newLeft = ml + vLeft;
    var newTop = mt + vTop;
    // check bounds
    var finished = false;
    if(fromTop && (newTop > t || newTop + mh < t)) {
        finished = true;
        newTop = (scroll > 0 ? t : t - mh);
    } else if(fromBottom && (newTop < t || newTop > h)) {
        finished = true;
        newTop = (scroll > 0 ? t : t + h);
    } else if(fromLeft && (newLeft > l || newLeft + mw < l)) {
        finished = true;
        newLeft = (scroll > 0 ? l : l - mw);
    } else if(fromRight && (newLeft < l || newLeft > w)) {
        finished = true;
        newLeft = (scroll > 0 ? l : l + w);
    }
    // set new position
    $moving.css('left', newLeft);
    $moving.css('top', newTop);
    // if finished change moving object
    if(finished) {
        // get the next moving
        if(scroll > 0) {
            $moving = $moving.next('.parallax');
            if($moving.length == 0)
                $moving = $view.find('.parallax:last');
        } else {
            $moving = $moving.prev('.parallax');
            if($moving.length == 0)
                $moving = $view.find('.parallax:first');
        }
    }
    // for debug
    $('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text());
}

Answer 6

May not be related to your specifics, but I had a jumpy parallax scrolling problem, I was able to solve it adding the following CSS for the fixed portions of the page:

@supports (background-attachment: fixed)
{
    .fixed-background
    {
        background-attachment: fixed;
    }
}

Not sure of all the specifics, but found at Alternate Fixed & Scroll Backgrounds