Переключение перехода не работает на 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);
    }

Проверьте это и наведите указатель мыши на любое имя в разделе служб. Таким образом, он работает на устройствах Android, во всех браузерах, но на Iphones, функция переворачивания не работает, даже на Chrome, тогда как он прекрасно работает в Chrome на устройствах Android, что заставило меня думать, что это проблема на ios , Не могли бы вы помочь мне исправить ошибку?