

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/HERo4.gif)](https://i.stack.imgur.com/HERo4.gif)

[code]

    #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);
      }
    }
[/code]

[code]

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


CC BY-SA 4.0
2019-09-04T17:34:36.537
57850
2019-09-05T11:16:01.570
2019-09-05T02:06:03.787
32986
35729
question
css
CSS animationで初期描画に含まれない要素がうまく表示されない


該当のコードで発生する現象から、これは Google Chrome に存在するバグであり、以下の Issue と関連があると考えられます。

[Issue 966019 - chromium - An open-source project to help move the web
forward. - Monorail](https://crbug.com/966019)

質問文のコードも、上記の記事に書かれているように、逐一再描画を行なうことで欠けた部分の描画を行うことが出来ます[[1]](https://crbug.com/966019)。

> Forcing a repaint more aggressively (for example, by turning on Show Layer
> Boundaries in the console) _does_ make the elements visible as appropriate.

そのため、今回の場合、 `z-index` プロパティや `transform-style`
プロパティを明示的に宣言することによって再描画を行ない、問題を解決することが出来ます (Google Chrome 76.0.3809.132
にて動作確認済み) [[2]](https://stackoverflow.com/a/13762053/12022095)。

[code]

    @keyframes rotate {
      from {
        transform: rotateY(0);
        transform-style: flat; /* or z-index: auto; */
      }
      to {
        transform: rotateY(360deg);
      }
    }
    
[/code]

[code]

    #card {
      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;
      backface-visibility: hidden;
    }
    
    .front {
      background-color: teal;
      animation: rotate 4s linear infinite;
    }
    
    .back {
      background-color: orangered;
      animation: rotate 4s linear -2s infinite;
    }
    
    @keyframes rotate {
      from {
        transform: rotateY(0);
        transform-style: flat; /* 追記 */
      }
      to {
        transform: rotateY(360deg);
      }
    }
[/code]

[code]

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

[code]

    #card {
      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;
      backface-visibility: hidden;
    }
    
    .front {
      background-color: teal;
      animation: rotate 4s linear infinite;
    }
    
    .back {
      background-color: orangered;
      animation: rotate 4s linear -2s infinite;
    }
    
    @keyframes rotate {
      from {
        z-index: auto; /* 追記 */
        transform: rotateY(0);
      }
      to {
        transform: rotateY(360deg);
      }
    }
[/code]

[code]

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

* * *

参考:

  1. [Issue 966019 - chromium - An open-source project to help move the web forward. - Monorail](https://crbug.com/966019)
  2. [css - How can I force WebKit to redraw/repaint to propagate style changes? - Stack Overflow](https://stackoverflow.com/a/13762053/12022095)


CC BY-SA 4.0
2019-09-05T02:05:12.673
57856
2019-09-05T11:16:01.570
2019-09-05T11:16:01.570
32986
32986
57850
answer