Bootstrap collapse — почему тормозит (заметна дискретность) если на странице много элементов?

Question

[Diesel-nick]

Сделал на страничке список групп у которых также есть подгрупп. И этот список сделал в виде древовидной структуры с Bootstrap collapse

Если элементов мало, всё хорошо, ничего не тормозит


Если элементов много при нажатии на переключатель Collapse анимация начинает притормаживать (появляется дискретность)

<div class="container">

 <div class="media">
  <div class="media-left">
    <div class="avatar avatar-group">
      <div class="avatar avatar-medium avatar-missing"></div>
      <div class="avatar avatar-medium avatar-missing"></div>
      <div class="avatar avatar-medium avatar-missing"></div>
    </div>
  </div>
  <div class="media-body">
    <a href="/ru/teams/1">обувь и Бакалея</a>
    <div class="pull-right">
      <span data-toggle="tooltip" data-placement="top" title="08 октября 2016, 10:48">около 5 часа назад</span>
      <a collapse="true" caret_class="text-muted fa-lg m-l-1" collapse_hidden="false" collapse_id="parent-teams-1" data-toggle="collapse" aria-controls="parent-teams-1" aria-expanded="true" href="#parent-teams-1" class=""><i class="fa fa-angle-down text-muted fa-lg m-l-1"></i></a>
      <i class="fa fa-ellipsis-h m-l-1" aria-hidden="true"></i>
    </div>
    <br>
    <small class="text-muted">No Members</small>
  </div>
  <hr class="media-hr">
</div>
<div id="parent-teams-1" class="sub-media collapse in" aria-expanded="true" style="">
  <div class="media">
  <div class="media-left">
    <div class="avatar avatar-group">
      <div class="avatar avatar-medium avatar-missing"></div>
      <div class="avatar avatar-medium avatar-missing"></div>
      <div class="avatar avatar-medium avatar-missing"></div>
    </div>
  </div>
  <div class="media-body">
    <a href="/ru/teams/2">красота и туризм</a>
    <div class="pull-right">
      <span data-toggle="tooltip" data-placement="top" title="08 октября 2016, 10:48">около 5 часа назад</span>
      
      <i class="fa fa-ellipsis-h m-l-1" aria-hidden="true"></i>
    </div>
    <br>
    <small class="text-muted">No Members</small>
  </div>
  <hr class="media-hr">
</div>
</div>

Answer 1

[Diesel-nick]

Проблема возникала в Safari если я использую скрепления и пунктирный border для пустых аватарок (как видно на картинке). Если убрать пунктир или скрепления, то всё ок - collapse отрабатывает очень быстро.