parallax scrolling issue - div element jerking when scrolling in webkit browsers
css, google-chrome, javascript, jquery, webkit
Solution
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.
Problem
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 ```