CSS flip animation flickering in Safari - css

Question

I have created a flip board animation with CSS transitions, and it works fine in Chrome/Firefox/Edge, but in Safari it flickers a lot during the transition, but the final state is correct.
I thought it might be a problem with the z-index in the transitions, but when removing those the flickering is still there.
I have autoprefixer on so I don't think it's an issue with backface-visibility.
If you look at this codepen in both Chrome and Safari, you can see the how it's supposed to be in Chrome, and the flickering issue in Safari.
https://codepen.io/joel-udd/pen/QWpEQMM
<div class="board board-1">
<div class="row-1">
<div class="letter-wrapper">
<div class="behind-letter">
<div class="behind bottom"><span>F</span></div>
<div class="behind top">I</div>
</div>
<div class="letter">
<div class="flip front">H</div>
<div class="flip back"><span>I</span></div>
</div>
<div class="letter">
<div class="flip front">G</div>
<div class="flip back"><span>H</span></div>
</div>
<div class="letter">
<div class="flip front">F</div>
<div class="flip back"><span>G</span></div>
</div>
</div>
</div>
</div>
.board {
display: inline-block;
position: relative;
perspective: 1000px;
.letter-wrapper {
display: inline-block;
position: relative;
width: 11vw;
margin-left: 2px;
height: 14vw;
.flip, .behind {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 14vw;
span {
display: inline-block;
transform: translateY(-50%);
}
}
.letter {
display: inline-block;
position: absolute;
top: 2px;
width: 100%;
height: 7vw;
transform: rotateX(0);
transform-style: preserve-3d;
transform-origin: bottom center;
.flip {
height: 100%;
backface-visibility: hidden;
&.back {
transform: rotateX(180deg);
}
}
&:nth-child(2) {
z-index: 10;
}
&:nth-child(3) {
z-index: 20;
}
&:nth-child(4) {
z-index: 30;
}
}
.behind-letter {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: 5;
.behind {
height: 50%;
&.bottom {
top: calc(50% + 2px);
}
}
}
}
&.active {
.row-1 {
.letter-wrapper {
.letter {
transform: rotateX(-180deg);
&:nth-child(2) {
z-index: 50;
transition: transform .5s .5s, z-index 0s .6s;
}
&:nth-child(3) {
z-index: 40;
transition: transform .5s .3s, z-index 0s .4s;
}
&:nth-child(4) {
transition: transform .5s .1s;
}
}
}
}
}
}
Thanks!