绘制渐变后 CSS 文本不会立即显示

Question

我有一个奇怪的问题。这仅发生在初次翻牌时。

我的文本显示在渐变背景之上。该背景图像在鼠标悬停时显示。

文本需要一瞬间才能显示，然后就会弹出。当图像翻转时，我需要文本已经存在，或者至少有一个平滑的过渡（如果这是不可能的）。我已经追踪到文本在图像不同角落的位置。如果我删除用于放置文本的 CSS，那么它会显示并正常工作。

这是 HTML

<div class="flip-card">

  <div class="flip-card-inner">

    <div class="flip-card-front">

      <img  [src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)"  alt="Avatar" style="width:300px;height:300px;">

    </div>

    <div class="flip-card-back linear-gradient">

      <h1 class="info">{{getTitle()}}</h1>

      <p class="info-bottom-right">{{getTitle()}}</p>

      <p class="info-bottom-left">{{getTitle()}}</p>

    </div>

  </div>

</div>

这是CSS

.flip-card {

  background-color: transparent;

  width: 300px;

  height: 200px;

  border: 1px solid #f1f1f1;

  perspective: 1000px; /* Remove this if you don't want the 3D effect */

}

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

.flip-card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 0.8s;

  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);

  cursor: pointer;

}

/* 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;

}

/* Style the back side */

.flip-card-back {

  background-color: dodgerblue;

  color: white;

  transform: rotateY(180deg);

}

.info{

  display: block;

  position: absolute;

  top: 10px;

  left: 10px;

  color: #fff;

  font-weight: bold;

}

.info-bottom-right{

  display: block;

  position: absolute;

  top: 10px;

  right: 10px;

  color: #fff;

  font-weight: bold;

}

.info-bottom-left{

  display: block;

  position: absolute;

  bottom: 10px;

  left: 10px;

  color: #fff;

  font-weight: bold;

}

Answer 1

事实证明，这是 Chromium 浏览器的一个已知错误 。您所要做的就是添加preserve-3d到前面和后面的类中。.flip-card-front, .flip-card-back {  position: absolute;  width: 100%;  height: 100%;  -webkit-backface-visibility: hidden; /* Safari */  backface-visibility: hidden;  transform-style: preserve-3d;}

Answer 2

过渡：变换0.8s；也适用于文本，因此当卡片翻转时，它会稍微延迟文本的显示。如果将其更改为 0.3 秒，卡片会翻转得更快，但文本也会显示得更快