У меня есть веб-сайт, который отлично работает в браузерах, последняя версия 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.
Кто-нибудь знает, в чем может быть проблема?
Большое спасибо.
РЕДАКТИРОВАТЬ
Я пытался :
Наконец-то я смог протестировать через инспектора сафари, подключив iphone к Mac. Ошибки в инспекторе нет, но он позволил мне увидеть, что вся левая часть обратной стороны моей "flipCard" больше не работает.
Итак, благодаря этой теме я наконец обнаружил, что виновато свойство преобразования: Почему я не могу щелкнуть левую часть ссылки на этой флип-карточке CSS в Chrome?
Я изменил это:
transform: rotateY(180deg);
в это
transform: rotateY(180deg) translateZ(1px);
и теперь он работает нормально.
Так что это не имело никакого отношения к vuejs...
Единственное, я не понимаю, почему эта проблема появилась с версии iOS 16.4, а не раньше.
Надеюсь, это поможет некоторым людям!