Chrome CSS Масштаб преобразования делает текст размытым

Question

Я работаю с перелистывающейся картой, и при использовании transform: scale(1.1) мне кажется, что текст не может быть сфокусирован на Chrome. Тем не менее, он фокусируется при использовании Firefox.
Эта проблема, кажется, исправлена, когда perspective уменьшено до 0, но это побуждает к цели иметь анимированный флип.

My Chrome Версия: 80.0.3987.116 Работает на Ma c Mini 2019 Catalina OS v10.15.3

function myFunction(e) {
  if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
  else e.style.transform = "rotateY(180deg)";
}

body {
  margin: 30px 0 0 30px;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 500px;
  /* Remove this if you don't want the 3D effect */
  transition: transform 0.25s;
  margin-bottom: 200px;
  filter: blur(0);
}

.flip-card:hover {
  transform: scale(1.1);
  backface-visibility: hidden;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all .2s ease-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-card-inner:hover {
  box-shadow: 0 0 13px -3px black;
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #bbb;
  color: black;
  transform: rotateY(0deg);
}

.flip-card img {
  width: 300px;
  height: 200px;
}


/* Style the back side */

.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<div class="flip-card">
  <div class="flip-card-inner" onclick="myFunction(this)">
    <div class="flip-card-front">
      <img src="https://images.pexels.com/photos/3626734/pexels-photo-3626734.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Avatar">
    </div>
    <div class="flip-card-back">
      <h1>Frank Lawn</h1>
      <p>Art Department Rep.</p>
      <p>Ext: 331</p>
    </div>
  </div>
</div>