Блог

В Safari на iOS 15 ссылки, которые находятся в pointer-events: none; примененном контейнере, не становятся доступными, если pointer-events all на более позднем этапе установлено значение динамически. На самом деле, в некоторых случаях они это делают, но это очень непредсказуемо. Например, когда контейнер является ul элементом, а ссылки находятся внутри li элемента, они становятся доступными для использования. Или когда у ссылки есть button брат или сестра. Я знаю, это звучит странно, но это правда. Я сделал демо-версию, так что вы можете попробовать ее сами: https://stackblitz.com/edit/web-platform-mdhjqs?file=index.html

Я что-то упускаю? Является ли эта ошибка уникальной для Safari на iOS 15?

Я наткнулся на ту же проблему с Safari iOS 15, этого не происходит ни в мобильном Chrome, ни в настольном Safari.

Решение, которое я нашел для получения такого же поведения, состоит в том, чтобы установить встроенный стиль с помощью JS, как показано ниже:

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

Я также удалил все спецификации свойств в CSS. Как только свойство установлено в none любом месте CSS, использование встроенных стилей больше не работает, что странно, так как можно было бы ожидать, что встроенные стили всегда будут иметь приоритет над классами.

Для меня это также проблема со структурой ul > li > a , как в моем тестовом примере, так и на примере Сенна.

Я также пытался установить события указателя на auto или initial без успеха.