0

I am using Bootstrap 3 panels

There is a weird animation going on when expanding a panel. It expands, collapses, and then reappears in the expanded state.

It happens only in Safari browser.

<main role="main">
       <h1 style="margin-top:63px;">Builds</h1>
<div class="panel-group mob_app_builds_history" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-primary">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse25" role="tab" id="headingOne25">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapse25" aria-expanded="false" aria-controls="collapse25">
          NBC <small style="mix-blend-mode: difference;">6 days ago</small>
        </a>
        <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
      </h4>
    </div>
    <div id="collapse25" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading25">
      <div class="panel-body">
        <p><b>Bundle:</b> abcd.ipa</p>
        <p><b>Tag:</b> "v3.17"</p>
      </div>
    </div>
  </div>
  </div><div>

https://jsfiddle.net/zprL63tq/

Mano
  • 979
  • 1
  • 18
  • 36

1 Answers1

0

I added the following, it works fine.

<div id="collapseOne" class="accordion-body collapse in no-transition">
Add the CSS..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

reference: Twitter Bootstrap 100% height accordion "jump"

Community
  • 1
  • 1
Mano
  • 979
  • 1
  • 18
  • 36