CSS animationで初期描画に含まれない要素がうまく表示されない

CSSアニメーションについての質問です。
両面に文字が書かれたカード(div.card)に回転するアニメーションを付けたいと思っています。
このときに、裏面(div.back)にはbackface-visibility: hiddenを指定していると、回転して表を向いても、Backの文字がうまく表示されません。
おそらく初期描画時にはレンダリングされないためだと思うのですが。。。
ダブルクリックすると（文字選択になるため）表示されるようになります。
どのように指定すればうまく表示するようになるでしょうか。

Chrome 76.0.3809.132でこの症状を確認しています。
iOS 12.4.1のSafariではこの症状は確認できませんでした。

#card {
  margin: 100px;
  width: 300px;
  height: 100px;
  perspective: 1000px;
}

.front,
.back {
  width: 300px;
  height: 100px;
  line-height: 100px;
  font-size: 50px;
  text-align: center;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background-color: teal;
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

.back {
  background-color: orangered;
  -webkit-animation: rotate 4s linear -2s infinite;
  animation: rotate 4s linear -2s infinite;
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotateY(360deg);
  }
}

<div id="card">
  <div class="front">Front</div>
  <div class="back">Back</div>
</div>