Setting pointer-events dynamically on iOS 15 Safari is unreliable and unpredictable

Question

In Safari on iOS 15, links that are in a container that has pointer-events: none; applied, don't become tappable when pointer-events is set to all dynamically at a later stage. Actually, in some cases they do, but it's very unpredictable. For instance, when the container is an ul and the links are inside a li element, they do become tappable. Or when the link has a button sibling. I know this sounds strange, but it's true. I made a demo, so you can try it for yourself: https://stackblitz.com/edit/web-platform-mdhjqs?file=index.html

Am I missing something? Is this a bug unique to Safari on iOS 15?

Suzette

Answer 1

I stumbled on the same issue with Safari iOS 15, this doesn't happen on mobile Chrome or on desktop Safari.

The solution I found to obtain the same behaviour is to set the inline style with JS, like the following:

if (el.classList.contains("is-clickable")) {
    el.style.pointerEvents = "all";
} else {
    el.style.pointerEvents = "none";
}

I've also removed any property specification in CSS. Once the property is set to none anywhere in the CSS using inline styles doesn't work anymore, which is odd as one would expect inline styles to always take precedence over classes.

For me this is also an issue with the structure ul > li > a, both in my test case and on Senne's example.

I've also tried setting pointer events to auto or initial with no success.

Indefinable