Menu
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?
417
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
Default Pointer Events on an element corresponds to the CSS pointer events property. It controls whether or not an element will "pass through" clicks to elements that are underneath it (that is, elements that have a smaller z-index). For example, in the following canvas an image sits over a button element.
Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
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.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
