Почему некоторая часть моего файла vue не работает с iOS > 16.4?

У меня есть веб-сайт, который отлично работает в браузерах, последняя версия Android, но не последняя версия iOS (> 16.4). Я должен уточнить, что он отлично работает на iOS 16.3. Я знаю, что iOS 16.4 сталкивается с множеством проблем, и поэтому я ждал iOS 16.4.1, чтобы увидеть, исправят ли они эту ошибку, но она все еще не работает. Мой сайт использует laravel 5.6 и vuejs 2.5.

Проблема звучит так, будто вся область страницы отключена. У меня есть две разные области, которые очень похожи, и одна из них как бы отключена, мы не можем щелкнуть элемент в iOS 16.4.

Вот код:

<div class = "temps" :class = "{inactive: !regulation_hot_or_cold}">
   <div class = "temp">
         <label class = "form-checkbox" :class = "{disabled: !is_zone_off || !can_change_setpoints}">
            <input type = "radio" :value = "1" v-model = "mutated_t1_t2" :disabled = "!is_zone_off || !can_change_setpoints">
            <span>First</span>
         </label>
         <div class = "input" :class = "{disabled: !can_change_setpoints}">
            <i class = "icon-minus" @click.prevent = "incrementCurrentSetpoint(-0.5, 1)"></i>
            <span class = "value">{{ currentSetpoint(1) }}{{ this.regulation_hot_or_cold ? '°C' : '' }}</span>
            <i class = "icon-plus" @click.prevent = "incrementCurrentSetpoint(0.5, 1)"></i>
         </div>
   </div>
   <div class = "temp">
         <label class = "form-checkbox" :class = "{disabled: !is_zone_off || !can_change_setpoints}">
            <input type = "radio" :value = "2" v-model = "mutated_t1_t2" :disabled = "!is_zone_off || !can_change_setpoints">
            <span>Second</span>
         </label>
         <div class = "input" :class = "{disabled: !can_change_setpoints}">
            <i class = "icon-minus" @click.prevent = "incrementCurrentSetpoint(-0.5, 2)"></i>
            <span class = "value">{{ currentSetpoint(2) }}{{ this.regulation_hot_or_cold ? '°C' : '' }}</span>
            <i class = "icon-plus" @click.prevent = "incrementCurrentSetpoint(0.5, 2)"></i>
         </div>
   </div>
</div>

Первый div с классом «temp» не работает, но второй работает нормально (на iOS 16.4 и iOS 16.4.1).

Он работает на более старых версиях iOS, таких как iOS 16.3.

Кто-нибудь знает, в чем может быть проблема?

Большое спасибо.

РЕДАКТИРОВАТЬ

Я пытался :

  • Обновите версию laravel с версии 5.6 до версии 8.0 = нет результатов
  • Добавить курсор: указатель на элемент, который должен быть кликабельным (я элементов) = нет результатов
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
114
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Наконец-то я смог протестировать через инспектора сафари, подключив iphone к Mac. Ошибки в инспекторе нет, но он позволил мне увидеть, что вся левая часть обратной стороны моей "flipCard" больше не работает.

Итак, благодаря этой теме я наконец обнаружил, что виновато свойство преобразования: Почему я не могу щелкнуть левую часть ссылки на этой флип-карточке CSS в Chrome?

Я изменил это:

transform: rotateY(180deg);

в это

transform: rotateY(180deg) translateZ(1px);

и теперь он работает нормально.

Так что это не имело никакого отношения к vuejs...

Единственное, я не понимаю, почему эта проблема появилась с версии iOS 16.4, а не раньше.

Надеюсь, это поможет некоторым людям!

Другие вопросы по теме