CSSでフリップボードを作成した際に発見したので、記事にしておきます。

確認できたChromeのバージョン: 76.0.3809.100
※FireFox, Safariでは確認できませんでした。

Chromeで以下HTMLのback, frontに対してfilterを使うと、flipBoardを

transform: rotateY(180deg);

で回転させた際に、1度目の回転中、裏面は表示されず回転が終わってからの表示になります。
drop-shadow以外でもバグります。

flipBoard.html

<div id="flipBoard">
  <div id="back">
    <img src="back.png">
  </div>
  <div id="front">
    <img src="front.png">
  </div>
</div>

style.css

div#flipBoard {
  width: 100px;
  height: 100px;
  position: relative;
  transition: all 1s;
  transform-style: preserve-3d;
}

div#back {
  transform: rotateY(180deg);
}

div#back, div#front {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  filter: drop-shadow(0px -5px 8px rgba(0, 0, 0, 0.4)); /* <= バグの原因 */
}