javascript – Chrome CSS Transform Scale Makes Text Blurry-ThrowExceptions

Exception or error:

I am working on a flipping card and when using transform: scale(1.1) I cannot seem to have the text to be focused for Chrome. However, it is focused when using Firefox.
The issue seems to be fixed when perspective is down to 0, but that defeats the purpose of having an animated flip.

My Chrome Version: 80.0.3987.116
Running on a Mac 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>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *