Geek Answers Handbook

Chrome crash prevention

I created a menu that moves to the current position of the window by scrolling. When I scroll up and down right away, sometimes a glitch appears in Chrome 30 with OS X 10.9 and Windows 7. After freezing, the anchor tag goes to the correct position (1 pixel up). Is there something wrong with my code? Is this a known bug?

Check out the JSFiddle Demo !

$(document).ready(function(){
  $(window).scroll(function(){
    var newTop = ($(window).scrollTop() + 40) +'px';
    $('#menu').stop().animate({ top: newTop}, 500);
  });
});

glitch

Edit: Fixed in Chrome 31.

+4
source share
2 answers

I am sure this is a rendering error, because:

  • Manually causes a redraw, forcing the glitch to go away.
  • Crash does not occur in other browsers I checked.

, - , :

:

$('#menu').stop().animate({ top: newTop }, 500, function(){
  $('#menu').css('overflow', 'hidden');
  setTimeout(function(){
    $('#menu').css('overflow', 'auto');
  }, 10);
});

jsFiddle Demo

, , - ( overflow). 10 , , , .

!

+3

, . , translate() transform-function, .

: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

jQuery translate() , , http://ricostacruz.com/jquery.transit/, .css() css transitions .

:

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.stop().transit({ y: newTop +'px' }, 500);
});

- http://jsfiddle.net/Hb3jS/5/

CSS:

JS

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.css({ transform: 'translateY(' + newTop +'px)' });
});

CSS

#menu { 
    transition: all .5s;
}

CSS http://jsfiddle.net/Hb3jS/6/

+3

More articles:


All Articles