CSS Вращающиеся Карты Мерцание

Question

Я столкнулся со странной проблемой, связанной с вращением CSS-карт.Я уже провел небольшое исследование по своей проблеме и нашел некоторые потенциальные решения, но ни одно из них не сработало.

Но сначала код, о котором я говорю:

    <header class="masthead" style="background-image:url('assets/img/header-bg.jpg');">
    <div style="height: 40em;" class="container"></div>
    <div class="cards-container">
        <!--   First Card -->
        <div class="card-container">
            <div class="card">
                <div class="front">
                    <img src="https://via.placeholder.com/250x250">
                </div>
                <div class="back">
                    <p><span style="color: #000000;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span></p>
                </div>
            </div>
        </div>

        <!--   Second Card -->
        <div class="card-container">
            <div class="card">
                <div class="front">
                    <img src="https://via.placeholder.com/250x250">
                </div>
                <div class="back">
                    <p><span style="color: #000000;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span></p>
                </div>
            </div>
        </div>

        <!--   Third Card -->
        <div class="card-container">
            <div class="card">
                <div class="front">
                    <img src="https://via.placeholder.com/250x250">
                </div>
                <div class="back">
                    <p><span style="color: #000000;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span></p>
                </div>
            </div>
        </div>

        <!--   Fourth Card -->
        <div class="card-container">
            <div class="card">
                <div class="front">
                    <img src="https://via.placeholder.com/250x250">
                </div>
                <div class="back">
                    <p><span style="color: #000000;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span></p>
                </div>
            </div>
        </div>

        <!--   Fifth Card -->
        <div class="card-container">
            <div class="card">
                <div class="front">
                    <img src="https://via.placeholder.com/250/0000FF">
                </div>
                <div class="back">
                   <p><span style="color: #000000;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span></p>
                </div>
            </div>
        </div>
    </div>
</header>

И CSS:

    .card-container {
    -webkit-perspective: 500px;
            perspective: 500px;
}

.card-container:hover .card{
    -webkit-transform: rotateY( 180deg );
            transform: rotateY( 180deg );
}

.card {
    -webkit-transition: -webkit-transform 0.7s;
            transition: transform 0.7s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.front, .back {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.back {
    -webkit-transform: rotateY( 180deg );
            transform: rotateY( 180deg );
}

.cards-container{
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: row;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.card {
  width: 150px;
    height: 150px;
  margin: 10px;
}

.front, .back {
  box-shadow: 0 1px 6px 0;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

img {
  display: block;
}

Исходный источник: https://codepen.io/shibl/pen/PzBwjR

Итак, что я заметил, так это то, что в Chrome последние две карты всегда мерцают при вращении, даже на коде ручки (если вы измените фон на черный,иначе это не очень видно, хотя).Даже если я удалю, например, пятую карту, номера 3 и 4 начнут мигать.

Во время исследования я пробовал разные фрагменты кода, такие как:

-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: scale(1);

Оригинальный код уже содержал некоторые из них, но это все еще не работает правильно.Он отлично работает в Firefox и Edge.Я действительно понятия не имею, что случилось с Chrome, поэтому я надеюсь, что некоторые из вас, ребята, могут мне помочь.

Заранее спасибо!:)

РЕДАКТИРОВАТЬ: Поскольку я единственный, кто имеет эту проблему, и я также не могу воспроизвести ее на моем Mac с помощью Chrome, эта тема решена.Спасибо за ответы!