Safari - CSS transform 3d rotation glitch

Question

I have a div inside a a container div. The inner div html consists of a single character and I am trying to make the div flip with a 180 degrees 3d rotation. The effect works fine in all browsers but Safari. On Safari when the inner div gets rotated only half character gets rendered like it's split in a half. It's not quite a flicker, it's just like half of the character disappears behind a plane that's not really there. As per other answers on the same topic I applyed the backface-visibilty:hidden and transform-style:preserve-3d rules to my code, but to no avail.

.inner{
    height: 80%;
    width: 80%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    font-family: Arial;
    font-size: 5em;
    font-weight: bolder;
    color: #7CC7EE;
    -ms-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.flip{
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -transform: rotateY(180deg);
}

I add and remove the .flip class via js to trigger the transition. Here's a slightly simplified situation of what I'm currently dealing with: https://jsfiddle.net/sb4usrs1/5/

If you click a div you can see its transition would be rendered fine but the below div would flicker -maybe that's a clue pointing to the cause?- In my actual scenario I have several of those divs flipping at the same time so it's a little more evident and confusing than this.

Answer 1

Apparently there's a problem with the rotating div intersecting the plane of the parent div. This answer: Bug in CSS3 rotateY transition on Safari? shed some light on the issue. I solved by setting the z-index=1 to the flipping div.