html – Half of the again of my profile card is exhibiting by the entrance on IOS cellular units

I’ve created a web site for my non-profit group, and I’ve an issue with my CSS for IOS cellular units. For my web site, I’ve created flippable profile playing cards that, when clicked on, will flip to show info behind the cardboard.

My flipping perform works on all units(even cellular units!), anticipate for cellular IOS units. For some purpose, the cardboard’s z index doesn’t work, and the again of the cardboard is proven, even when the cardboard is meant to show the entrance.

For reference:
Right here is the cardboard when it’s supposed to indicate the entrance:
Entrance Facet

And right here is the cardboard when it’s supposed to indicate the again:
Again Facet

Please word that this solely occurs on cellular IOS units, and works on each different gadget.
I am undecided what is going on on right here, and I’ve tried numerous instances twiddling with the angle, the z-index, and altering the remodel: to a webkit remodel. Nevertheless, none of those options have labored. Anybody have any concepts?

Right here is the web site if you wish to dig into the HTML and CSS:
https://outputsuccesseducation.org/

And right here is the code for the profile playing cards in CSS particularly:

.label{
    
    prime: 50%;
    left: 50%;
    width:280px;
    top: 10px;
    transform-style:preserve-3d;
    cursor: pointer;

}

.flip-card {
    
    place: relative;
    width: 100%;
    top: 80%;
    margin-bottom: 600px;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
   
}

.flip-card .entrance{
 
    place: absolute !vital;
    width: 100%;
    top: 100%;
    text-align: middle;
    background: #AAC3B2;
    backface-visibility: hidden; 
  z-index: 3;
    border-radius: 25px 25px 25px 25px; 
}
.flip-card .again {
    place: absolute !vital;
    width: 100%;
    top: 100%;
    text-align: middle;
    background: #AAC3B2;
      z-index: 1;
    backface-visibility: hidden; 

    border-radius: 25px 25px 25px 25px; 
 
}


.flip-card .again {
    -webkit-transform: rotate(179.9deg);
    remodel: rotateX(179.9deg);
    coloration: #000;
    background: #A4C3B2; 
    

}




:checked + .flip-card {
     -webkit-transform: rotate(179.9deg);
    remodel: rotateX(179.9deg);
    
}



label:hover :checked + .flip-card {

    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
}

PS: This is among the first instances I’ve posted a query on Stack Overflow. If there may be something I can enhance on, please let me know. I’ve heard that Stack Overflow customers are ruthless in relation to not following the rules to asking questions, so let me know if there was something I wanted to the touch upon.