ios safari中transform3D转换成背面以后，背面内容不显示

Question

问题描述

transform 卡片3D转换，正面是内容A，背面是内容B。理想结果是卡片翻转后内容A消失，内容B显示。
chrome下正常，safari下卡片反转后内容A虽然消失，但是内容B不显示，如果加上transition过渡时间，那么在过渡时会显示B内容，过渡完成后B内容消失

这是父级卡片样式

.jinxing-card3 {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    position: relative;
}

这是正面样式

.jinxing-card3-front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
}

这是背面样式

.jinxing-card3-back {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
}

html结构为

<div class="jinxing-card3">
    <div class="jinxing-card3-front">                
    </div>
    <div class="jinxing-card3-back">                
    </div>
</div>

我录了一个视频，第一个在电脑上查看的是safari中，背面的完成转过来立马就消失了，因为有一个1s的过渡，第二个在手机上的是chrome，正常显示
视频

Answer 1

RTFM：backface-visibility
https://developer.mozilla.org...