En Safari en iOS 15, enlaces que están en un contenedor que tiene pointer-events: none; aplicado, no se puede tocar cuando pointer-events se configuran en all dinámicamente en una etapa posterior. De hecho, en algunos casos lo hacen, pero es muy impredecible. Por ejemplo, cuando el contenedor es un ul y los enlaces están dentro de un elemento li , se pueden tocar. O cuando el enlace tiene un button hermano. Sé que esto suena extraño, pero es verdad. Hice una demostración, así que puedes probarla por ti mismo: https://stackblitz.com/edit/web-platform-mdhjqs?file=index.html
¿Me estoy perdiendo de algo? ¿Es este un error exclusivo de Safari en iOS 15?
Me encontré con el mismo problema con Safari iOS 15, esto no sucede en Chrome móvil ni en Safari de escritorio.
La solución que encontré para obtener el mismo comportamiento es configurar el estilo en línea con JS, como el siguiente:
if (el.classList.contains("is-clickable")) { el.style.pointerEvents = "all"; } else { el.style.pointerEvents = "none"; } También eliminé cualquier especificación de propiedad en CSS. Una vez que la propiedad se establece en none en cualquier parte del CSS, el uso de estilos en línea ya no funciona, lo cual es extraño, ya que uno esperaría que los estilos en línea siempre tuvieran prioridad sobre las clases.
Para mí, esto también es un problema con la estructura ul > li > a , tanto en mi caso de prueba como en el ejemplo de Senne.
También intenté configurar eventos de puntero en auto o initial sin éxito.