【バグ】ChromeでCSSアニメーションがうまく描画されない

やりたいこと

裏表に文字が書かれたカード(div#card)に回転するアニメーションを付ける。

症状

裏面(div.back)がうまく描画されない。

発生条件

backface-visibility: hiddenを指定している要素に対して回転アニメーションをつけると発生。

Blinkのバグと思われる。

• Chrome 76.0.3809.132

• Opera 63.0.3368.66
  では発生。

• Firefox 68.0.2
  では発生せず。

対策

@keyframes内でz-index: autoなどを明示的に指定することで再描画を促す。

CSS

@keyframes rotate {
  from {
    z-index: auto;  /* これを追加 */
    -webkit-transform: rotate(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotateY(360deg);
  }
}

サンプルコード

HTML/CSS

HTML

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

CSS

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

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

.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 {
    z-index: auto;  /* これを追加 */
    -webkit-transform: rotate(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotateY(360deg);
  }
}