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

parallax js
parallax floating elements
jquery parallax

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 scroll to the about section. I am not sure if t this is a css or JS issue.. below is a snippet i have incorporated into my parallax function

Does anyone know how i an fix this issue?

$(document).ready(function(){

// Cache the Window object
$window = $(window);

// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {  
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('[data-type="background"]').each(function(){


    // Store some variables based on where we are
    var $self = $(this),
        offsetCoords = $self.offset(),
        topOffset = offsetCoords.top;


    // When the window is scrolled...
    $(window).scroll(function() {

        // If this section is in view
        if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
             ( (topOffset + $self.height()) > $window.scrollTop() ) ) {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $self.data('speed')); 

            // If this element has a Y offset then add it on
            if ($self.data('offsetY')) {
                yPos += $self.data('offsetY');
            }

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $self.css({ backgroundPosition: coords });

           $('[data-type="scroll-text"]', $self).each(function() {
                    var $text= $(this);
                     var pos = ($window.scrollTop()/10) * $text.data('speed');
                     var curP = $text.css('margin-top'); 
                     var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
                     if(is_chrome) {
                         $text.animate({
                         paddingTop: pos,
                        }, 200, 'linear', function() {
                            // Animation complete.
                        });
                     } else {
                     $text.css('padding-top', pos);
                     }
            }); 

        }; // in view

    }); // window scroll

}); // each data-type


      }); // document ready

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.

javascript - parallax scrolling issue, 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  In the case of Mobile Safari, however, things are a little more convoluted. Applying overflow-y: scroll to the container element technically works, but at the cost of being able to fling the scrolling element. The solution is to add -webkit-overflow-scrolling: touch, but it will also flatten the perspective and we won’t get any parallaxing.

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.

Jittering in Safari · Issue #154 · pixelcog/parallax.js · GitHub, javascript - parallax scrolling issue - div element jerking when scrol javascript jquery css google-chrome webkit 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  Stealing from this thread, it seems to be an issue with how Safari handles tracking user scrolling versus the other browsers: "This unfortunately isn't to do with your coding, but rather the browsers themselves, as Safari reacts to mouse scrolling very differently to Firefox and Chrome.

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.

richardshepherd/Parallax-Scrolling, I get the jitter on the main Parallax.js page in Safari as well, not as much as I do -issue-div-element-jerking-when-scrolling-in-webkit-browsers  The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

Have you tried adding the preventdefault inside the scroll function?

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

Touch scroll not working css, zbuc opened this issue on Nov 13, 2012 · 3 comments /questions/13440577/​parallax-scrolling-issue-div-element-jerking-when-scrolling-in-webkit-browsers  If you are using fixed backgrounds on your website such as here, you may experience issues on IE (I'm on IE11 Windows 8). Your fixed backgrounds may jump around and jitter when scrolling with mousewheel. A way to fix this is to disable smooth scrolling on IE, but it won't help your users.

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

Fixed div position when scrolling, Touchpad scroll not working after Windows 10 upgrade: Synaptics problem To fix this, I simply removed the -webkit-overflow-scrolling:touch from the menu when Plus, the whole thing degrades to non-touch browsers that can still scroll via this tutorial actually covers “How to disable skrollr parallax scrolling on mobile  Support in Mobile WebKit browsers requires a touch scrolling library, and a slightly tweaked configuration. For a full walkthrough on how to implement this correctly, read my blog post "Mobile Parallax with Stellar.js". Please note that parallax backgrounds are not recommended in Mobile WebKit due to performance constraints.

Infinite All-CSS Scrolling Slideshow, Inside a fixed DIV with scrolling enabled, i've got rich calendar elements in popup mode when i scroll down in the div, the calendars have an issue, they no  Because we are scrolling on an element, we need to specify -webkit-overflow-scrolling: touch, but that causes 3D flattening and our entire scrolling effect stops working. We solved this problem in the parallax scroller by detecting iOS Safari and relying on position: sticky as a workaround, and we’ll do exactly the same thing here.

scrolling div not scrolling on page load, <div class="slideshow"> <div class="images"> A slideshow of images in here get better performance (at least in WebKit / Mobile WebKit) by telling the browser​  The reason for this is that browsers tend to be optimized for the case where new content appears at the top or bottom of the screen when you scroll (depending on your scroll direction) and, in general terms, the browsers work best when very little changes visually during a scroll. For a parallax site that’s rarely the case since many times

How to stop floating (sliding) div at footer, scrolling div not scrolling on page load - html. I have a div that i want scrollable. I've got it working 100% in chrome, but the issue starts in other browsers. They added it so new content being added to pages would not jerk the scroll around. Cursor doesn't target elements when scrolling with the mouse wheel / track  That is browser support. The answer to this, it works very well on a modern browser including the latest version of firefox and chrome. As for IE, it works with IE11. It also works with Mobile browsers including Chrome Mobile 52 but didn’t work with Safari Mobile 9.0. Pure CSS Horizontal Scroll with Mouse Wheel

Comments
  • Your code would benefit from simple optimizations: 1) Call $(window).scrollTop() just once and cache the value, 2) Query the DOM for the [data-text] elements outside of the event listener.
  • @IanKuca can you elaborate on this abit, or even edit the JS on github. I'm not the greatest at Javascript
  • pastebin.com/JCaA7T6A
  • @IanKuca with that script i get the following error message..."Uncaught ReferenceError: $self is not defined"
  • You need to have the $self variable defined before the part of the code I edited. Think a little.
  • Not sure if it's important, but, since the question is asking for "webkit" browsers - iOS Safari and Android Chrome both have trouble handling position: fixed. Not sure if mobile is important, but they are webkit browsers. iOS 5 and 6 are a little better, but iOS 4 and most recent Android treat position fixed very poorly
  • I had a jitter issue and position:fixed worked for me. Thanks!
  • I had a related problem with parallax scroll that only occurred in Chrome (Win7). My elements were being repositioned 'onscroll' and everything was adjusting correctly, but when I used the mouse wheel to scroll -and only with the mouse wheel- the whole top/bottom edge of the viewport would jump about 100px or so and reveal what looked like a transparent area inside the browser window with no content (you know, that gray/white checkered pattern). This little glitch would repeat rapidly... Your suggestion to add -webkit-transform: translate3d(0,0,0); to the moving elements solved my issue.
  • I was having an issue if you scrolled really fast up and "jammed" into the top that some elements would get out of sync and potentially be hundreds of pixels off. This fixed that issue flawlessly! Thank You!