绘制渐变后，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;
}

这是一个显示实际问题的堆栈

https://stackblitz.com/edit/angular-eyo4a8-sura86?file=app%2Fdatepicker-date-class-example.css

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秒，卡片翻转速度会更快，但文本也会更快地出现