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
video

.
Jun.20,2022

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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7c1024-1f952.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7c1024-1f952.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?