css - 親が表示なしで一時的に非表示になっていると、webkit の遷移アニメーションが失われる

Question

遷移中の子の親要素の表示プロパティを変更すると、webkit で子のアニメーションが停止するようです。要素の表示が元に戻ると、遷移が終了したかのように子スタイルが表示されます。 CSS トランジション プロパティが存在しません。

Firefox では、親 (および内部要素) が一時的に非表示になっていても要素が遷移し続けているかのように、遷移は中断されずに継続します。

問題の複製は次のとおりです。firefox と webkit で試して違いを確認してください

これは既知のバグですか？

Answer 1

visibility: hidden;の代わりに使用するdisplay: none;とうまくいくようです。

そのように: https://tinker.io/95219/3

.hidden {
    visibility: hidden;
}

エミュレートしたい場合display: none;(つまり、要素が実際に完全に隠されているかのように)、次のように高さを 0 に設定#containerできます#parent。

#container.hidden {
    visibility: hidden;
    height: 0;
}