Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 417
Senne Avatar asked Oct 05 '21 12:10

Senne


People also ask

What is pointer events auto?

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.

What is default pointer event?

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.

What does pointer events none mean?

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.

What does pointer events mean in CSS?

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.


1 Answers

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.

like image 86
Morekid Avatar answered Oct 18 '22 07:10

Morekid