css - Safari CSS3 3D アニメーション変換された交差要素がちらつく問題

Question

結婚式の招待状を作成しましたが、招待状の下部に結婚式の Web サイトにログインするためのコードがあります。人々にコードを認識してもらうために、私が作成した小さな CSS3 3D アニメーション:デモを見る

HTML:

<section id="viewport">
    <div id="invitation" class="show-front">
        <figure class="front"></figure>
        <figure class="ring"></figure>
    </div>
</section>

CSS:

section#viewport {
    -webkit-perspective: 1000;
    -webkit-perspective-origin: 0% 0%;
}

div#invitation {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s ease;
}

#invitation .front  {
    -webkit-transform: rotateX(12deg) translate3d(0px, 0px, 32px);

#invitation .ring {
    -webkit-transform: rotateY(-90deg) translate3d(6px, -15px, -1px);
}

#invitation.show-front  {
    -webkit-transform: rotateY(-24deg) rotateX(90deg);
}

#invitation:hover {
    -webkit-transform: rotateY(20deg) rotateX(3deg);
}

Chrome と Firefox ではすべて問題なく表示されますが、Safari では要素が交差すると厄介なちらつきの問題が発生します。前面の画像要素と交差しているリングを削除すると、ちらつきの問題は発生しません:リングのないデモ

私はすべてを試し、見つけたすべての投稿を読みましたが、この問題を解決するものはありませんでした。デモで役に立たない html 要素はすべて、実際のアニメーションでは役に立たないわけではありません。