I have a website that works fine on browsers, last Android version but not on the last iOS version (>16.4). I have to precise that it works fine on iOS 16.3.
I know that iOS 16.4 meets a lots of issues and that's why I've waited for iOS 16.4.1 to see if they resolve this bug but it still doesn't work.
My website use laravel 5.6 and vuejs 2.5.

The problem sounds like an entire area of the page which is disabled. I have two different area that are very similar and one of them is like disabled, we cannot click on the element on iOS 16.4.

Here is the code :

<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>

The first div with "temp" class doesn't work but the second one works fine (on iOS 16.4 and iOS 16.4.1).

It works on iOS older versions like iOS 16.3.

Does anyone have an idea of what can be the problem?

Thanks a lot.

EDIT

I tried :

• Upgrade laravel version from 5.6 to 8.0 version = no results
• Add cursor:pointer to an element that should be clickable (i elements) = no results

I was finally able to test via the safari inspector by plugging an iphone into a mac.
No error in the inspector but it allowed me to see that it was the entire left part of the back of my "flipCard" that was no longer working.

So I finally found that it was the transform property that was at fault thanks to this topic : https://stackoverflow.com/questions/60797033/why-cant-i-click-the-left-side-of-the-link-on-this-css-flip-card-in-chrome

I changed this :

transform: rotateY(180deg);

into this

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

and now it works fine.

So it had nothing to do with vuejs...

The only thing is that I don't understand why this problem appeared since version 16.4 of iOS and not before.

Hope this helps some people !