CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
RecursiveCodeNinja
RecursiveCodeNinja

Reputation: 23

Why is there a visible lag during this CSS transition?

The transition of this html element has a visible lag the first time it runs. This card flipping mechanism is smooth after you hover over it more than once. Can someone explain why and also how to fix it?

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.k-card {
  border-radius: 25px;
  width: 250px;
  margin: 2%;
  border-color: white;
  height: 330px;
}

.k-card-image {
  text-align: center;
  align-content: center;
}

.k-card-footer {
  text-align: center;
  border: none;
  position: absolute;
  bottom: 1px;
  width: 100%;
  background-color: inherit;
  font-weight: bold;
  color: white;
  align-items: center;
  border-radius: 25px;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
  border-radius: 25px;
  width: 250px;
  height: 330px;
}


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

.flip-card-inner {
  border-radius: 25px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* 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;
  border-radius: 25px;
}


/* Style the front side */

.flip-card-front {
  background-color: #18988B;
}

.k-button.k-primary {
  background-color: #18988B;
  padding: 2px;
  border-color: #18988B;
}


/* Style the back side */

.flip-card-back {
  background-color: #58595B;
  transform: rotateY(180deg);
}
<div class="flip-card k-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <br />
      <center>
        <img class="k-card-image" src="https://i.picsum.photos/id/1003/400/400.jpg" width="70%" />
      </center>
      <div class="k-card-footer">
        <p>REPORTS</p>
      </div>
    </div>
    <div class="flip-card-back">
      <br />
      <center>
        <img class="k-card-image" src="https://i.picsum.photos/id/1001/400/400.jpg" width="70%" />
      </center>
      <div class="k-card-footer">
        <p>TEST</p>
      </div>
    </div>
  </div>
</div>
</div>

Also, a link to jsfiddle:https://jsfiddle.net/McRobBlob/s9f07wgy/

Thanks!

Upvotes: 2

Views: 3811

Answers (2)

Adam Orłowski
Adam Orłowski

Reputation: 4464

The trouble is with property transform-style: preserve-3d;.

Remove it from .flip-card-inner block and move it to .flip-card:hover .flip-card-inner block.

.flip-card-inner {
  border-radius: 25px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
/*  transform-style: preserve-3d; remove */
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  transform-style: preserve-3d; /* add */
}

UPDATE

After @TemaniAfif comment I have better solution:

Just remove backface-visibility: hidden; from your css.

.flip-card-front,
.flip-card-back {
/* -webkit-backface-visibility: hidden; remove */
/* backface-visibility: hidden;  remove */
}

Upvotes: 3

Jaime Bl&#225;zquez
Jaime Bl&#225;zquez

Reputation: 328

I would try adding will-change: transform; or will-change: auto; to .flip-card-inner.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Upvotes: 1

Related Questions