Safari - CSSで3D回転グリッチを変換する

Question

私はdivをコンテナdivに入れました。内側のdiv htmlは1文字で構成されており、divのフリップを180度回転させようとしています。エフェクトはSafariを除くすべてのブラウザで正常に動作します。 Safariでは、内側のdivが回転して半分の文字だけが半分に分割されてレンダリングされます。それはまったくちらつきではなく、キャラクターの半分が本当はそこにない飛行機の後ろに消えるようなものです。 同じトピックについての他の答えとして、私はbackface-visibilty：hiddenとtransform-style：自分のコードに3次元ルールを保存しましたが、役に立たなかった。

.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); 
} 

移行をトリガーするjs経由で.flipクラスを追加および削除します。 ここで私は現在、扱ってるもののわずかに簡略化状況です：あなたはその遷移が微細化されるだろうが、それが原因を指しているの手掛かりだ-maybe以下のdivがちらつくだろう見ることができるのdivをクリックした場合 https://jsfiddle.net/sb4usrs1/5/

は、 ？ - 私の実際のシナリオでは、私はこれらのdivsのいくつかを同時にフリップしているので、これより少し明白で混乱しています。

Answer 1

明らかに、親divの平面を横切る回転するdivに問題があります。この回答：Bug in CSS3 rotateY transition on Safari?は、問題にいくつかの光を当てる。私はz-index = 1をフリッピングdivに設定することで解決しました。