CSS text isn't showing instantly after gradient is drawn - html

Question

I am having a weird issue. This only happens on the initial card flip.
I have text that shows on top of a gradient background. This background image shows on mouse hover.
The text takes a split second to show and then it just pops in. I need the text to already be there when the image is flipped or at least have a smooth transition in if this isn't possible. I have traced it down to the placement of the text in different corners of the image. If I remove the css for the placement of the text then it shows and works fine.
Here is the 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>
Here is the 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;
}
Here is a stackblitz showing the actual issue
https://stackblitz.com/edit/angular-eyo4a8-sura86?file=app%2Fdatepicker-date-class-example.css

Answer 1

It turns out this is a known bug with Chromium browsers - this thread finally shed some light on it. All you have to do is add preserve-3d to the front and back classes.
.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

The transition : transform 0.8s; applies also to the text so it adds a small delay to the text to appear when the cards flips. If you change it to 0.3s the card will flip faster but the text will also appear faster