CODEWITHSUNDEEP
javascripthtmljquerycssbootstrap-4
meh1710
meh1710

Reputation: 61

Bootstrap 4.4.1 Accordion Scroll Behaviour / Bug(?) - Chrome

I've been using Bootstrap accordions for a while now, but only recently has this problem been noticed.

If you run the below snippet (preferably in full page), scroll down until the accordion is in view, then toggle the middle card to open, the page scrolls un-naturally (you'll know what I mean when you see it).

The problem only seems to occur when cards are toggled below the currently active card.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Test</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body style="height: 200vh;">
    <div class="container-fluid text-center d-flex bg-light" style="height: 500px">
        <div class="row align-items-center mx-auto">
            <div class="col">
                <p class="my-auto mb-0">Container to push accordion down.</p>
            </div>
        </div>        
    </div>

    <div class="col-6 offset-3 mt-5">
        <div class="accordion" id="exampleAccordion">
            <div class="card">
                <div class="card-header bg-light" id="exampleAccordionHeadingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-capitalize" type="button" data-toggle="collapse" data-target="#exampleAccordionCollapseOne" aria-expanded="true" aria-controls="exampleAccordionCollapseOne">
                            Lorem ipsum dolor sit
                        </button>
                    </h2>
                </div>
                <div id="exampleAccordionCollapseOne" class="collapse show" aria-labelledby="exampleAccordionHeadingOne" data-parent="#exampleAccordion">
                    <div class="card-body">
                        <p class="mb-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae dicta odio, corrupti minus aliquam repellat unde, sapiente quo ea corporis aut est soluta ad eveniet molestiae magnam fugiat sequi nostrum blanditiis molestias ducimus! Eum iure eveniet magnam ipsam illum reiciendis. Eius itaque neque, vitae non, placeat deserunt id expedita aliquam, quaerat quo laudantium distinctio. Rerum neque laboriosam fugit quis aut, optio obcaecati nam soluta error enim fuga perferendis doloremque pariatur! Tempora est cupiditate nulla, tenetur accusantium corrupti, quia distinctio recusandae obcaecati, voluptatum explicabo et debitis dolorum blanditiis? Nostrum nam tenetur animi amet, recusandae, delectus at magnam porro deserunt facilis ipsam.</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header bg-light" id="exampleAccordionHeadingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-capitalize collapsed" type="button" data-toggle="collapse" data-target="#exampleAccordionCollapseTwo" aria-expanded="false" aria-controls="exampleAccordionCollapseTwo">
                            Lorem ipsum dolor sit
                        </button>
                    </h2>
                </div>
                <div id="exampleAccordionCollapseTwo" class="collapse" aria-labelledby="exampleAccordionHeadingTwo" data-parent="#exampleAccordion">
                    <div class="card-body">
                        <p class="mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem alias adipisci fugiat tempora enim libero. Dicta, eveniet repellat iusto quae sequi accusamus repellendus id ducimus enim quam iste ullam totam aspernatur eum saepe odit. Dolore culpa impedit cumque quaerat obcaecati commodi necessitatibus minus, sit suscipit dolorum corrupti atque eum expedita tenetur et sint voluptas beatae temporibus optio reiciendis asperiores libero veritatis exercitationem. Repudiandae itaque ullam hic, commodi sapiente in voluptate, maiores corrupti ipsa expedita delectus provident, aliquam eos deleniti! Minima neque vitae laudantium assumenda culpa error temporibus voluptatem enim a? Quae placeat omnis ratione culpa accusantium, incidunt eum aspernatur voluptates!</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header bg-light" id="exampleAccordionHeadingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-capitalize collapsed" type="button" data-toggle="collapse" data-target="#exampleAccordionCollapseThree" aria-expanded="false" aria-controls="exampleAccordionCollapseThree">
                            Lorem ipsum dolor sit
                        </button>
                    </h2>
                </div>
                <div id="exampleAccordionCollapseThree" class="collapse" aria-labelledby="exampleAccordionHeadingThree" data-parent="#exampleAccordion">
                    <div class="card-body">
                        <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, ipsum voluptas nobis, soluta molestias repellat aut reiciendis id quae dolorum recusandae temporibus facilis voluptatem. Voluptates neque veniam consectetur itaque reiciendis fugiat sint dolorem perspiciatis, ex soluta culpa unde eum officia libero impedit quae nesciunt. Enim maiores temporibus ab commodi esse similique optio fuga error nulla dolore quaerat saepe libero ipsam neque doloribus aliquid iusto facere, doloremque sunt! Atque quasi dolorum consequatur. Maiores ipsum doloribus est! Quod, facilis. Voluptates dolores eaque excepturi labore assumenda sapiente, adipisci mollitia, autem et laboriosam ea, aspernatur aliquid quo officiis. Architecto ut minus magni animi consectetur.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>   
</body>
</html>

My thought is that it's a problem introduced in a recent Chrome update, because earlier this year and even last year, accordions I have created have worked perfectly (scrolled properly).

Any help/suggestions will be highly appreciated! :)

Gyazo gif to show what I mean: https://i.gyazo.com/fc794405faa290ab42b3f71d339cd4cd.mp4

Upvotes: 4

Views: 292

Answers (1)

meh1710
meh1710

Reputation: 61

The problem I have described above was indeed introduced in a Chrome update and had been reported here.

The date this question got posted (4th August 2020), Bootstrap released v4.5.1 and the scroll glitch is no longer present.

Upvotes: 1

Related Questions