Bug 227829 – Running WAAPI animations prevent any form checkbox or button to be clicked

• Status: NEW
• Component: Animations

Hi,

I found an annoying issue when trying to run animations in parallel with a staggering delay. Until all items are rendered, Safari on iOS (not reproducible on Mac nor any other browser I have tried) will make the click on input elements (such as input) or button completely inopperant, forcing the user to wait before being able to safely interact with forms.

This behavior can be tried here on iOS 14.6: https://jsfiddle.net/s1qavy8j/7/show

If you try to quickly click on the input you will see that nearly 80% of the time, the click is not taken into account and the checkbox does not change. After all the animations are done after a few seconds, the proper behavior is restored.

[Alexey Proskuryakov]

I'm unable to reproduce this with iOS 15 beta on iPh0one 12 Pro.

(In reply to Alexey Proskuryakov from comment #1)
> I'm unable to reproduce this with iOS 15 beta on iPh0one 12 Pro.

Thanks! I have actually asked my co-workers and indeed, none of them is being able to reproduce the issue. I wonder what element could cause this on my phone? I have tried to revert the original "Experimental features" to make sure they do not impact it, but still can reproduce the issue. What system could eventually impact the WAAPI ?

[Radar WebKit Bug Importer]

<rdar://problem/80673081>

Hi,

Is there any news on this issue? Actually, everybody has been able to reproduce it at our team.

After further inspection and removing all the code until the issue is gone, I have found the issue is when those animated elements contains a <a> or a <button> element. For the a tag, if I replace the "href" to a "data-href", or if I use a different tag such as a span or a div, it is not reproducible. For some reason, it seems that on Safari iOS, when elements containing a <a> or <button> are animated, they block any other clicks on the page.

[Antoine Quint]

I've tried this with iOS 15 and tapping on "Click me" shows an inconsistency, but tapping on the checkbox itself always behaves as expected.

(In reply to Antoine Quint from comment #5)
> I've tried this with iOS 15 and tapping on "Click me" shows an
> inconsistency, but tapping on the checkbox itself always behaves as expected.

The click me being the label it should not make any difference at all, no ?

(In reply to Antoine Quint from comment #5)
> I've tried this with iOS 15 and tapping on "Click me" shows an
> inconsistency, but tapping on the checkbox itself always behaves as expected.

Just to show the strangeness of this issue:

* If the div contains <a> with a href (https://jsfiddle.net/s1qavy8j/7/show) => issue appears

* If the href is replaced by a data-href: https://jsfiddle.net/49pxjva0/show => no issue

* If the <a> tag is replaced by a <button> tag: https://jsfiddle.net/kom8x7c1/show => issue appears

* If the <a> tag is replaced by a <div> or any other tag: https://jsfiddle.net/szt14wug/show => no issue

Could you please tell me what is going on here? I can't understand why the behavior of a label completely changes based on what the animated div contains :/. It does not make any sense to me.