Проблема отображения 3D карточки (Flip 3D-card CSS) на iphone и ipad

Всем привет. Не так давно я сделал 3D карточку (HTML5, CSS3), которая при наведении на нее курсора делает поворот на 180 градусов. Эта карточка без проблем работает на компьютере и на устройствах под управлением android. Данную карточку можно посмотреть тут https://itr.tpu.ru/html/science-activity

Но при просмотре данной карточки на устройствах под управлением iOS, неважно под каким браузером, карточка изначально отображается уже перевернутой и в зеркальном отражении. Ниже представлена картинка

Вопрос: Возможно ли как-то пофиксить этот баг, чтобы карточка нормально отображалась на iOS?

HTML:

  <div class="cards-item">
    <div class="front-side">
      <div class="item-pic"><img src="https://portal-storage.tpu.ru/images/site-36/3aa9fe547cbee755935b731ce06a4ea9_1625457085.png"></div>
      <div class="item-title"><span>Интеллектуальная система компьютерного зрения</span></div>
    </div>
    <div class="back-side">
      <div class="back-text"><span>Аппаратная компонента  системы компьютерного зрения (СКЗ)  устанавливается на борту БПЛА и</span>позволяет вести в режиме реального времени с помощью аппаратно-реализованных сверточных
        нейронных сетей (СНС).
      </div>
      <div class="back-href"><a href="https://dev.itr.tpu.ru/html/project-1">Включайся в проект или создавай свой &#8594;</a></div>
    </div>
  </div>

CSS:

.cards-item {
      display: flex;
      flex-direction: column;
      width: 335px;
      height: 245px;
      position: relative;
      perspective: 1000px;

      .item-pic {
        width: 100%;

        img {
          width: 100%;
          height: 185px;
        }
      }

      .item-title {
        font-size: 20px;
        text-align: center;
        background: $gray-4;
        padding: 10px 0;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }

      .front-side, .back-side {
        position: absolute;
        flex-direction: column;
        width: 100%;
        height: 120%;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: 0.8s;
        backface-visibility: hidden;
      }

      .back-text {
        padding: 15px;
      }

      .back-href {
        padding: 10px 0 20px 0;

        a {
          color: $green-1;
        }
      }

      .back-side {
        background-color: $gray-4;
        transform: rotateY(180deg);
      }

      &:hover .front-side {
        transform: rotateY(180deg);
      }

      &:hover .back-side {
        transform: rotateY(360deg);
      }
    }