Safari - CSS 变换 3d 旋转故障

Question

我在aa容器div中有一个div。内部 div html 由单个字符组成，我试图使 div 翻转 180 度 3d 旋转。该效果在除 Safari 之外的所有浏览器中都能正常工作。在 Safari 上，当内部 div 被旋转时，只有半个字符被渲染，就像它被分成两半一样。这不是一闪而过，就像角色的一半消失在一架并不真正存在的飞机后面。根据同一主题的其他答案，我将 backface-visibilty:hidden 和 transform-style:preserve-3d 规则应用于我的代码，但无济于事。

.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 类来触发转换。这是我目前正在处理的稍微简化的情况：https : //jsfiddle.net/sb4usrs1/5/

如果您单击一个 div，您可以看到它的过渡效果会很好，但下面的 div 会闪烁 - 也许这是指向原因的线索？- 在我的实际场景中，我有几个 div 同时翻转，所以有点比这更明显和混乱。

Answer 1

显然，旋转 div 与父 div 平面相交存在问题。这个答案：Bug in CSS3rotateYtransition on Safari? 阐明了这个问题。我通过将 z-index=1 设置为翻转 div 来解决。