Safari CSS3 3D动画转换交叉元素闪烁问题

Question

我发了一个结婚请柬，邀请函底部有一个代码登录婚礼网站。为了让人们了解代码我创建了一个小小的CSS3 3D动画：see the demo

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中，交叉元素会产生恼人的闪烁问题。如果我删除与前图像元素相交的环，则不会出现闪烁问题：the demo without rings

我已经尝试了所有内容并阅读了我能找到的所有帖子，但没有解决这个问题。演示中所有无用的html元素在我的真实动画中都没用。