CSS 3D Rotate无法在Safari和iOS Safari上使用已使用-webkit-以及其他所有功能

如何解决CSS 3D Rotate无法在Safari和iOS Safari上使用已使用-webkit-以及其他所有功能

我使用css 3D旋转来翻转图片，它在Chrome和Firefox上效果很好。 但是当使用野生动物园时，当图片翻转到背面时，它只是闪烁而消失了。

我已经使用-webkit-backface-visibility：hidden和-webkit-transform。

我还试图通过将-webkit-backface-visibility：hiddened隐藏到正面和背面图片的容器（.inner）中来进行修复。这会使图片粘住，但按钮也会冻结。

我该如何解决？

To see the question clearly,please open in safari:

HTML：

<div class="us"> <h2 id="NorthAmerica" class="usTitle"><a href="#">rotate</a></h2>
        <div class="tags">
          <!--tag1-->
          <div class="flip-card">
            <section class="tag inner">
              <div class="tag front">
                <div class="r1 ">
                  <img src="https://images-na.ssl-images-amazon.com/images/G/01/img18/home/journeys/OTJmY2FmYTAt/OTJmY2FmYTAt-ZGUyZWFmODIt-w758._SY608_CB408650445_.jpg" alt="">
                </div>
              </div><!--front-->

              <div class="back ny pop">
                <div class="back"></div>
                <div class="popup"></div>
                <!-- <img class="back" src="jfk.JPG" alt="NY"> -->
                <a>
                  <button class="truthButton">Ok</button>
                </a>
                <a>
                  <button class="flipButton">No</button>
                </a>
              </div> <!--back-->
             
            </section> <!--tag inner-->
           </div> <!--flip-card-->
          <div>

CSS：

/*==============
       Flip card   
===============*/
.flip-card {
    background-color: transparent;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  
  .inner {    /*also tag*/
    position: relative;
    /* 
    width: 100%;
  height: 100%; */
    -webkit-transition: 0.6s;
            transform 0.6s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-box-shadow: 0px 2px 8px 0 black;
            box-shadow: 0px 2px 8px 0 black;
  }
  
  .flip-card:hover .inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  
  .front,.back {
    position: absolute;
    /* width: 100%;
  height: 100%; */
    /* -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  
  .back {
    transform: rotateY(180deg);
    width: 20em;
    height: 15em;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
  }

  .flipButton{
    bottom: 3%;
    right: 20%;
  }
  .truthButton{
    bottom: 3%;
    left: 20%;
  }
  .flipButton,.truthButton{
    position: absolute;
    color: var(--clr-pink);
    border: 1px solid var(--clr-blue);
    border-radius: 10px;
    padding: .2em .3em;
    font-size: var(--fs-body);
    background-color: var(--clr-blue);;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    transition: transform 0.6s; 
  }
  .truthButton::after,.flipButton::after {
      content: 'K';
      font-size: .1em;
      color: var(--clr-blue);
      position: absolute;
      bottom: 0;
      right: 0;
  }
  .truthButton:hover,.flipButton:hover {
    color: var(--clr-blue);
    background:var(--clr-pink);
    border: 1px solid var(--clr-pink);
    transform: scale(1.1);
  }
  /*==============
           HEADER
    ===============*/
  header {
    max-width: 100%;
    margin: 0 auto;
  }
  
  .title a {
    font-size: var(--fs-h2);
  }
  
  .title,.usTitle,li,p {
    color: var(--clr-blue);
    text-align: center;
    /* font-weight: 700; */
  }
  p{
    font-size: var(--fs-h3);
  }
  .usTitle {
    font-size: var(--fs-h2);
  }
  
  li {
    border: 1px solid var(--clr-blue);
    border-radius: 10px;
    padding: .5em 0;
    margin: .5em 0;
  }
  
  li:hover {
    border: 1px solid var(--clr-pink);
    /* background: var(--clr-pink); */
  }
  
  a {
    color: var(--clr-blue);
    font-size: var(--fs-h3);
    font-weight: 500;
  }
  
  a:hover {
    color: var(--clr-pink);
  }
  
  @media (min-width: 700px) {
    header {
      max-width: 100%;
    }
    nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    li {
      padding: .5em;
      margin: .5em;
    }
  }
  
  /*==============
           TAGS
    ===============*/
  .tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /*space-evenly*/
  }
  
  /*==============
           TAG
    ===============*/
  .r4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .r4 .number {
    margin-right: 3em;
  }
  
  .r4 .date {
    margin-right: 1.5em;
  }
  
  .r6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  
  .r1 img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 18em;
    width: 80%;
    margin: 0 auto;
  }
  
  /*compare to position absolute this is better solution to position skyteam*/
  .tag {
    /* position: relative; */
    max-width: 100%;
    width: 20em;
    height: 15em;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: center;
        align-content: center;
    background: #fff;
    /* background:url("https://cdn.pixabay.com/photo/2017/08/01/14/14/white-2565766__480.jpg"); */
    -ms-grid-rows: (0.3fr)[8];
        grid-template-rows: repeat(8,0.3fr);
        grid-template-areas: "r1" "r2" "r3" "r4" "." "r6" "r7" "r8";

    /* -webkit-backface-visibility: hidden; */
  }
  
 
  /*==============
           BASE
    ===============*/
  *,*::before,*::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  :root {
    --clr-dark: #232323;
    --clr-pink: #ff3385;
    --clr-blue: #80d4ff;
    --ff-main: 'Roboto Mono',monospace;
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 1.8rem;
    --fs-body: 1.25rem;
  }
  
  html,body {
    background: #232323;
    font-family: var(0ff-main);
  }
  
  a,li {
    cursor: pointer;
    text-decoration: none;
    list-style: none;
  }
  
  @media (min-width: 360px) and (max-width: 480px) {
    :root {
      --fs-h1: 1.5rem;
      --fs-h2: 1.25rem;
      --fs-h3: .8rem;
      --fs-body: 0.25rem;
    }
  }
  .ny{
    background-image: url(https://cdn.pixabay.com/photo/2016/10/28/13/09/usa-1777986__480.jpg);
  }