Bootstrap手风琴折叠动画无法在Firefox和Safari Mac / iOS上运行

Question

我在我的网站上使用Bootstrap手风琴，复制了Bootstrap accordion documentation的示例并适应了我的网站。 collapse animation在Chrome上运行良好，但在Firefox和Safari（移动/台式机版本）上效果不佳。功能性起作用，但是动画不起作用，它以一种非平稳的方式崩溃。您可以在我的网站here上看到它。

<div id="accordion">
  <div class="card no-focus-outline">
         <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header bg-rosa mb-5" id="headingOne">
        <div style="max-width: 511px;">
          <h1>HABITACIÓN INDIVIDUAL</h1><img src="https://lagaleramagazine.es/rucab/img/arrow-down.png" class="tab-arrow" style="margin-bottom: -300px; width: 70px; " /></div>   
    </div>
        </button>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
    <div class="row justify-content-center align-items-center">
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/SOL-02-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/VENTILADOR-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/CALEFACCION-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/WIFI-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/ESCRITORIO-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/WC-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/DUCHA-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/TARJETA-02.png"/></div>
    <div class="col-xl-1 col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-fluid" src="img/habitaciones/icons/LIMPIEZA-02.png"/></div>
</div>
<div class="container">
  <div class="row" style="margin-bottom: 150px;">
    <div class="img-container-hab col-lg-8 mx-auto">
      <img class="top fade-in" alt=" " src="img/stock-photo-double-bed-in-the-hotel-696169024.jpg" width="100%">

          </div>
    <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 mx-auto home-text-div">
      <p class="habitaciones-text-p text-justify">Habitación totalmente reformada con una cama individual de 0.90 cm, cuenta con calefacción en invierno y ventilador de techo en verano, amplio escritorio y muy luminoso, baño privado dentro de la habitación, agua caliente, un gran armario con capacidad para todo lo que necesites guardar, puerta de seguridad con tarjeta de acceso, internet por cable, wifi, una ventana, servicio de limpieza una vez a la semana y un pequeño kit de limpieza para necesidades puntuales.  </p>
    </div>
  </div>
  </div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
        <button data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header bg-amarillo mb-5" id="headingTwo">
          <h1>HABITACIÓN DOBLE</h1>
        </button>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
         <button  data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    <div class="card-header bg-rosa mb-5" id="headingThree">
          <h1>HABITACIÓN ADAPTADA</h1>
        </button>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

自定义CSS：

.bg-rosa button, .bg-amarillo button {
border: 0px;
}
.bg-amarillo button, .bg-amarillo {
background: #fbc00c; 
}
.bg-amarillo h1 {
    right: 50px;
}
.bg-rosa button {
float: left;
}
.bg-rosa button, .bg-rosa {
background: #c33e69;
}
.card-header {
padding-bottom: 130px;
border-radius: 0px !important;
}
.card-header h1 {
    max-width: 600px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    padding-left: 40px;
    margin-top: -53px;
    position: absolute;
    font-size: 4.3em;
        -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */

}
.card button {
padding: 0px;
background: none;
border: 0px;
}

.bg-rosa h1 {
color: #fbc00c;
text-align: left;

}

.bg-amarillo h1 {
color: #c33e69;
text-align: right;

}

.tab-arrow {
    -webkit-transform: rotate(180deg);    
    -moz-transform: rotate(180deg);        
    -o-transform: rotate(180deg);          
    -ms-transform: rotate(180deg);         
    transform: rotate(180deg);
      -webkit-transition: transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;        
}

.collapsed .tab-arrow {
    -webkit-transform: rotate(0deg);     
    -moz-transform: rotate(0deg);        
    -o-transform: rotate(0deg);          
    -ms-transform: rotate(0deg);   
    transform: rotate(0deg);       
}


body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

.habitaciones-text-p {
    padding-top: 45px;
    padding-right: 25px;
    color: #fff;
    padding-left: 25px;
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 2rem;
}
.img-container-hab img {
height: 90%;
width: 90%;
}