Css: focus does not work in iOS Safari / Chrome, works fine on Android / PC Chrome
I have a project where I cannot change the HTML. On mobile, I should have the menu open, but I needed to add: in front of the pseudo-element so that the click does not activate the link, and then when the menu is open (when it is focused), with a transition, I move: to the item up, so the user can click links. This works fine on Chrome on my PC, also on my Android phone, but not on iOS Safari or Chrome ...
Here it is: http://jsfiddle.net/59pp5o7t/1/
Do you have any idea what the problem is, or do you have a better CSS-only solution for my problem?
Thank!
<div class="portlet-body">
<div class="nav-menu nav-menu-style-">
<ul class="layouts level-1">
<li class="open selected "><a class="open selected " href="#"> Page 1</a>
</li>
<li class="open "><a class="open " href="#"> Page 2</a>
</li>
<li class="open "><a class="open " href="#"> Page 3</a>
</li>
<li class="open "><a class="open " href="#"> Page 4</a>
</li>
</ul>
</div>
source to share
If you can try adding the tag ontouchstart=""
to the tag <body>
, it might work.
I'm not sure about a CSS only solution. = (
EDIT: take a look at this as well as LINK
Updated jsfiddle
<body ontouchstart="">
<div class="portlet-body">
<div class="nav-menu nav-menu-style-">
<ul class="layouts level-1">
<li class="open selected "><a class="open selected " href="#"> Page 1</a>
</li>
<li class="open "><a class="open " href="#"> Page 2</a>
</li>
<li class="open "><a class="open " href="#"> Page 3</a>
</li>
<li class="open "><a class="open " href="#"> Page 4</a>
</li>
</ul>
</div>
</div>
</body>
source to share