question-mark
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

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:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop 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>

Read more comments on GitHub >

github_iconTop 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...
Read more >
[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...
Read more >
.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....
Read more >
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 ......
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found