翻转过渡在iPhone上不起作用

Question

我有以下代码

<div class="row justify-content-center" style="background-color: #DEDEDE;">
            <!-- Single Special Area -->
            <div class="col-md-4 text-center wow fadeInUp single-special 2" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp; min-height: 300px;">
                <div class="flip-container">
                    <div class="flipper">
                        <div class="front">
                            <div class="single-icon">
                                <span class="spk-icon-block spk-workplace" aria-hidden="true"></span>
                            </div>
                            <h1>Workplace <br>setup</h1>
                        </div>
                        <div class="back d-flex align-items-center">
                            <p>
We provide end to end services to help you set up your organisational         
workplace, as per the needs. We use modern techniques to provide help in 
defining ethics, best practices, organisational behaviours and culture. Our     
team helps in implementing effective office design, health & safety, 
ergonomic practices, compliance, policies & guidelines, employee benefits, 
growth & appraisal system, maternity and paternity leave programs, wellness 
and stress management, sustainable employability etc. for your workplace.</p>
                        </div>
                    </div>
                </div>
            </div>
</div>

And the css 
---------
.flip-container {
    -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
@media (min-width: 1400px) and (max-width: 1600px) {
.flip-container {
    margin-bottom: 0px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
    .flip-container {
        margin-bottom: 50px;
    }
}
.flip-container:hover .flipper, .flip-container.hover .flipper {

    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    max-width: 100%;
    min-height: 350px;
}

/* flip speed goes here */
.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;

    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    margin: auto;
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}
.single-special .front {
    padding: 60px;
}
@media (min-width: 1400px) {
    .front h1 {
    padding: 10px 80px;
}
}
@media (min-width: 1110px) and (max-width: 1399px) {
    .front h1 {
        padding: 10px 50px;
    }
}
@media (min-width: 700px) and (max-width: 1099px) {
    .front h1 {
        padding: 15px 10px;
        font-size: 22px;
    }
    .back p {
        font-size: 13px;
    }
}
@media (min-width: 501px) and (max-width: 767px){
    .front h1 {
    padding: 10px 40px;
}
}
@media (min-width: 320px) and (max-width: 500px) {
    .front h1 {
        padding-top: 10px 30px;
    }
}
@media (max-width: 320px) {
    .single-special .front {
        padding: 40px;
        margin-left: 40px;
    }
}
@media (min-width: 321px) and (max-width: 767px) {
    .single-special .front {
        padding: 40px;
        margin-left: 65px;
    }   
}

/* back, initially hidden pane */
    .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

选中this，然后将鼠标悬停在“服务”部分中的所有名称上。因此，它可以在android设备，所有浏览器上使用，但在Iphone上却无法使用，即使在Chrome上也无法正常工作，但在android设备上的Chrome上却可以正常工作，这使我认为这是ios上的问题。您能帮我纠正错误吗？