Made on the page a list of groups that also have subgroups.And this list is made in the form of a tree structure with Bootstrap collapse

If the elements are few, 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(discretization 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="/en/teams/1">shoes and Groceries</a>
    <div class="pull-right">
      <span data-toggle="tooltip" data-placement="top" title="October 8, 2016, 10:48">about 5 hours ago</span>
      <a collapse="true" caret_class="text-muted fa-lg ml-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 ml-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">
  <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="/en/teams/2">beauty and tourism</a>
    <div class="pull-right">
      <span data-toggle="tooltip" data-placement="top" title="October 8, 2016, 10:48">about 5 hours ago</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>

1 Answers 1

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