Html Chrome CSS3可滚动div-won'；直到动画完成后才渲染

我正在使用Angular开发一个简单的flashcard，但我有一个问题，在动画完成之前，rotateY（180度）变换的div的背面不会被渲染：

如果div不可滚动，则不会发生这种情况

使用的HTML如下所示，innerHTML只注入文本：

<div class="card-container">
<div class="flip-container" [class.flip]="isFlipped" [class.fadeOut]="isFadeOut">
  <div class="flipper" [class.noanimate]="isNotAnimating">
    <div class="front" [innerHTML]="cardsToStudy[currentCardIndex].front | safeHTML" (click)="toggleFlip()">
      <!-- front content -->
    </div>
    <div class="back" [innerHTML]="cardsToStudy[currentCardIndex].back | safeHTML" (click)="toggleFlip()">
      <!-- back content -->
    </div>
  </div>
</div>

我花了最后一天的时间试图解决这个问题，但是到目前为止还没有任何运气。这发生在Chrome手机和桌面上

任何关于正在发生的事情和任何可能的修复的想法都将是非常受欢迎的