Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bootstrap 5 + Jquery animate scrollTop laggy on Chrome only

See original GitHub issue

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

Bootstrap 5.1.3 and Jquery 3.6.0 scrollTop animation not start immediately after click on Chrome, but works normlly on other browser(Firefox). Sometimes the animation start after a while (maybe 500 ms) after click, sometimes it start with slow speed then as normal.

Reduced test cases

I tried this minimal code below (Bootstrap 5.1.3) and the problem appears. I also tried several code with other versions of Bootstrap (from 5.0.0 to 5.1.2) and the problem still appears.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="bg-secondary" style="height:2500px;"></div>
    <p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
  </body>
  <script>
    $(document).ready(function (){
      $("#scroll-top").click(function() {
        $("body,html").animate({
          scrollTop: 0
        },500);
      });
    });
  </script>
</html>

I tried another code below (older version of Bootstrap 4.6.1), animation works normally.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="bg-secondary" style="height:2500px;"></div>
    <p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
  </body>
  <script>
    $(document).ready(function (){
      $("#scroll-top").click(function() {
        $("body,html").animate({
          scrollTop: 0
        },500);
      });
    });
  </script>
</html>

So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and how to fix it.

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.1.3

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

arthurshlaincommented, Dec 13, 2021

You can also add inline style using jQuery css() method:

$(document).ready(function (){

  $("html").css('scroll-behavior', 'auto');

  // click handler here

}};

2reactions

crftwrkcommented, Dec 13, 2021

jQuery scroll script has conflict with scroll-behavior: smooth in _reboot.scss line 33. Just override it with css.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      html {
        scroll-behavior: auto !important;
      }
    </style>
  </head>
  <body>
    <div class="bg-secondary" style="height:2500px;"></div>
    <p class="mb-0 text-center"><a href="javascript:;" id="scroll-top" class="text-dark text-decoration-none">Back to Top</a></p>
  </body>
  <script>
    $(document).ready(function (){
      $("#scroll-top").click(function() {
        $("body,html").animate({
          scrollTop: 0
        },500);
      });
    });
  </script>
</html>

Top Results From Across the Web

Animate scrollTop laggy on Chrome only - Stack Overflow

1), animation works normally. So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and...

[Best solution]-Animate scrollTop laggy on Chrome only

1), animation works normally. So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and...

.animate() | jQuery API Documentation

A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties....

Offcanvas · Bootstrap v5.0

Backdrop. Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling ......

Well-controlled scrolling with CSS Scroll Snap - web.dev

This is intentional as they actually modify the box for all relevant scroll operations and are not just scroll snapping. For example, Chrome...