:: После наведения с помощью css transform добавляет ширину к моему li во время преобразования

Question

У меня есть список социальных иконок, которые при наведении курсора создают «кубический эффект 3d» с трансформациями CSS.У меня есть проблема: когда я наведите курсор на любой li из списка, div автоматически добавляет ширину, когда li вращается (применяя преобразования css).Когда анимация закончена, она получает оригинальную ширину.В Chrome этого не произошло (по крайней мере, в моей версии 72.0.3626.109 (64 бита)), но в Firefox 65.0.1 (64-битной), когда я наведу курсор мыши на значки социальных сетей, это происходит.Вы можете увидеть живой пример здесь: https://lagaleramagazine.es/rucab/index.html (встроенный список значков социальных сетей в верхнем правом углу).

.social-head-container {
  position: absolute;
  z-index: 10000000000000000;
  float: right;
  width: 138px;
  font-size: 0px;
  background: #c23f69;
  padding-left: 2px !important;
  /* height: 30px; */
  right: 28px;
  padding-right: 0px;
  top: 75px;
  margin: 0px !important;
}

.container-social ul {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  margin: 0;
  height: 50px;
  background: red;
  width: 197px;
  padding: 0;
  display: flex;
}

.container-social ul li {
  position: relative;
  list-style: none;
  height: 51px;
  width: 51px;
}

.container-social ul li a {
  display: block;
  transition: 0.5s;
  background: #333;
}

.container-social li a span {
  width: 100%;
  height: 100%;
}

.container-social ul li a span:before {
  font-family: fontAwesome;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #333;
  transform-origin: top;
  transition: transform 0.5s;
  text-align: center;
}

.container-social ul li:hover a span:before {
  transform: rotateX(90deg) translateY(-50%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li a span:after {
  font-family: fontAwesome;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.5s;
  text-align: center;
  transform: rotateX(90deg) translateY(50%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li:nth-child(1) a span:after {
  background: #8a3ab9;
}

.container-social ul li:nth-child(2) a span:after {
  background: #3B5998;
}

.container-social ul li:nth-child(3) a span:after {
  background: #0084b4;
}

.container-social ul li:nth-child(4) a span:after {
  background: #0077B5;
}

.container-social ul li:nth-child(5) a span:after {
  background: #3cba54;
}

.container-social ul li:hover a span:after {
  transform: rotateX(0deg) translateY(0%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li:nth-child(1) a span:before,
.container-social ul li:nth-child(1) a span:after {
  content: '\f16d';
}

.container-social ul li:nth-child(2) a span:before,
.container-social ul li:nth-child(2) a span:after {
  content: '\f09a';
}

.container-social ul li:nth-child(3) a span:before,
.container-social ul li:nth-child(3) a span:after {
  content: '\f099';
}

.container-social ul li:nth-child(4) a span:before,
.container-social ul li:nth-child(4) a span:after {
  content: '\f0e1';
}

.container-social ul li:nth-child(5) a span:before,
.container-social ul li:nth-child(5) a span:after {
  content: '\f0d5';
}

<div class="float-right social-head-container">
  <div class="container-social">
    <ul>
      <div class="social-head">
        <li><a href="#"><span></span></a></li>
      </div>
      <div class="social-head">
        <li><a href="#"><span></span></a></li>
      </div>
      <div class="social-head">
        <li><a href="#"><span></span></a></li>
      </div>
    </ul>
  </div>
</div>