无法删除翻页式CSS转换中的模糊文本

Question

我想删除使用transform时Chrome上出现的模糊文字。我正在使用Flip Card Bootstrap4。我应用了一些修复程序，但没有一个起作用。我附上了一张照片，您也可以看到实况here。

在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 -->