iOS Safari で z-index が効かない問題

くるっとフリップするアニメーション効果を付けた時に回転中に固定（fixed）ヘッダーの上にアニメーションが表示されてしまう事象が発生

くるっと回るアニメーション

@keyframes flip-left {
    from {
        opacity: 0;
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    }

    to {
        opacity: 1;
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    }
}

くるっと回るアニメーションパーツの親セクションに-webkit-transform: translate3d( 0, 0, 0);を指定すると解決した。

//親のセクション
.section {
    -webkit-transform: translate3d( 0, 0, 0); /* stylelint-disable-line */
    ...
}

参考サイト

z-indexが効かない場合はtransformに気をつけよう！【Safari】