Bootstrap collapse - why does it slow down (discreteness is noticeable) if there are a lot of elements on the page?

Question

Bootstrap

I made a list of groups on the page that also have subgroups. And I made this list in the form of a tree structure with Bootstrap collapse
If there are few elements, everything is fine, nothing slows down

If there are a lot of elements, when you click on the Collapse switch, the animation starts to slow down (discreteness appears)

<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

The problem occurred in Safari if I use clips and a dashed border for empty avatars (as seen in the picture). If you remove the dotted line or fasteners, then everything is OK - collapse works out very quickly.