Не удается удалить размытый текст в CSS-преобразовании флип-карты

Question

Я хочу удалить размытый текст, который появляется в Chrome при использовании transform.Я использую Flip Card Bootstrap 4. Я применил несколько исправлений, но ни одно из них не сработало.Я приложил фотографию, и вы можете увидеть вживую здесь тоже.

В Firefox и Safari все работает нормально.У меня есть 1px движение влево от переднего изображения, когда преобразование возвращается в исходное состояние (без наведения мыши).Это происходит только на Chrome, я тоже хочу это исправить.

.card {
  border: 1px solid transparent;
  background: transparent !important;
  -webkit-font-smoothing: antialiased;
}

.back .card .card-block {
  background: #fbc00c;
  border: 1px solid transparent;
  border-radius: 5px;
}

.card-flip {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.card-flip:hover .flip,
.card-flip.hover .flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-flip,
.front,
.back {
  position: relative;
  display: block;
}

.flip {
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  height: 100%;
}

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

<!-- Card Flip -->
<div class="card-flip">
  <div class="flip">
    <div class="front">
      <!-- front content -->
      <div class="card">
        <div class="card-block">
          <img src="img/Icono%20Casa-04.png" />
          <h2>ABIERTO 24/7</h2>
        </div>
      </div>
    </div>
    <div class="back">
      <!-- back content -->
      <div class="card">
        <div class="card-block">
          <p style="width: 100%;display: table-cell;vertical-align: middle;height: 60%;text-align: center;margin-left: auto;height: 167px;margin-right: auto;">con seguridad las 24 h y trabajadores de la residencia.</p>
          <h2>ABIERTO 24/7</h2>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Card Flip -->