绘制渐变后 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 秒，卡片会翻转得更快，但文本也会显示得更快