Focus-inin работает в браузере Android, но не в iOS ⇐ CSS

[Anonymous]

У меня есть двухуровневое меню навигации, реализованное с помощью псевдокласса :focus-within. На небольших устройствах она должна выглядеть как кнопка «Меню» в нижней части экрана, которая при нажатии раскрывается до первого уровня. Второй уровень должен открываться при нажатии на предмет первого уровня, а первый уровень (разумеется) должен оставаться открытым. Это отлично работает на телефонах Android, но пользователи iPhone сообщают, что кнопка «Меню» не реагирует на нажатие.
Вот фрагмент HTML:

Код: Выделить всё

[url=#]☰ Menu[/url]


[url=/]Home[/url]
[url=/#GCCprogramme]Concerts & Events[/url]

[url=#]About Us[/url]


[url=/about-us.php]The Choir[/url]
[url=/#GCCrecordings]The Choir on CD[/url]
[url=/history.php]History[/url]
[url=/contact-us.php#GCCcontact]Contact[/url]



[url=/for-members/members1.php]For Members[/url]

А вот CSS:

Код: Выделить всё

.gcc-expands {
position: relative;
}

.gcc-expansion {
display: none;
position: relative;
}

.gcc-expands:focus-within>.gcc-expansion {
display: block;
}

При фокусировке на псевдоссылке #GCCnavOpen должно отображаться расширение .gcc первого уровня, а при фокусировке на ссылке «О нас» первый уровень должен оставаться открытым (:focus-within ) и откройте внутреннее расширение .gcc.
По данным caniuse, это поддерживается в iOS Safari с версии 10.3 (2017), но, похоже, оно не работает для моих пользователей. Есть идеи, пожалуйста?

Подробнее здесь: https://stackoverflow.com/questions/664 ... ut-not-ios