After the transform3D is converted to the back in ios safari, the content on the back is not displayed

problem description

transform card 3D conversion, with content An on the front and content B on the back. The ideal result is that content A disappears and content B displays after the card is flipped.
chrome is normal. Content A disappears after card inversion in safari, but content B does not display. If transition transition time is added, B content will be displayed during transition, and B content will disappear after transition

this is the parent card style

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

this is the front style

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

this is the back style

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

html structure is

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

I recorded a video. The first thing I saw on my computer was safari, and the completion of the back disappeared immediately, because there was a 1s transition, and the second one on the phone was chrome, which normally displayed
v ideo