10

Since Chrome 61, I have many problems with scrolling through jquery 3.2.1 commands. It does not scroll anymore.

Chrome gives me the console notification (the page is last updated mei 12, 2017).

Blink deferred a task in order to make scrolling smoother. Your timer and network tasks should take less than 50ms to run to avoid this. Please see https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail and https://crbug.com/574343#c40 for more information.

Example: 

console.log("start");
$('body').animate({ 
  scrollTop : $('#id').offset().top - 100
},3000,function(e) {
  console.log("end");
});

Does anyone have an idea what the cause is and what I can do with it?

Wobbo
  • 140
  • 1
  • 9

1 Answers1

10

It seems that the overflow is set to the html in current version ( like in -moz. Check out this question that i made a while a go )

$(function() {
    console.log("start");
    $('html').animate({
        scrollTop: $('#my-id').offset().top - 100
    }, 3000, function(e) {
        console.log("end");
    });
});

https://jsfiddle.net/4ebggecv/

Or you could add those styles and keep animating body

html {
    overflow: hidden;
    height: 100%;
}
body {
    height: 100%;
    overflow: auto;
}

https://jsfiddle.net/ykyt58ac/1/

Toni Michel Caubet
  • 17,157
  • 49
  • 178
  • 335
  • 3
    I did not get a warning as noted in the question, but simply changing it from `$('body').animate(...)` to `$('html').animate(...)` fixed my issue. This only became an issue after Chrome 61 – Jacob Morrison Sep 21 '17 at 13:47