CODEWITHSUNDEEP
htmlioscssanchor
Randorile
Randorile

Reputation: 61

iPhone (Safari) anchor tags don't work as intended

I'm having trouble with a specific browser/device which I need to serve for my website.

Essentially, I have anchor tags which display a hidden element when clicked. This works as intended on everything (Firefox/Chrome/IE on PC, Android FF/Chrome/Browser) except iOS. When clicking the "View Bio" link, the text should transition in and be displayed. When doing this on iOS a grey box hovers over the element (so I assume it knows there is something there), however it does not show the hidden element.

After doing some research I can see that there may be an issue with the way iOS deals with "onclick" or something to that effect. I have tried to implement a few different things (mainly java-based) though they haven't worked. They may not actually be what I need to do, as this implementation is purely HTML/CSS based, but I've tried everything I've come across. Most of the fixes involved generally don't involve hidden elements, and are more often simple "scroll to point" implementations. It's likely the same thing.

As far as I can tell, there is some sort of bug or dislike of anchor tags with iOS, from the articles/existing help pages I have read. It may not be applicable, but according to some users iOS does not serve "onclick" or "click", and rather uses some form of "touch".

Is there a workaround to this? It shouldn't matter if it's a little messy, so long as it serves iOS users as intended. If there's a way to listen for a "click" and treat this as a "touched" for iOS that would probably be the simplest solution. I'm no expert, so I could be well off the mark.

My code:

<div class="dimg">
<img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive" style="border:2px solid #535353;">
</div> 
<a href="#" class="showme" onclick="return false">View Bio</a>
<div id="desk" class="trans">
  <p>This is the text to be displayed when the anchor is clicked</p>

CSS:

.showme {
 text-decoration:none;
 color:#535353;
 letter-spacing:1px;
 }

.showme:focus + #desk {
 opacity:1;
 visibility:visible;
 position:relative;
 }

#desk {
visibility:hidden;
opacity:0;
position:absolute;
border-radius:10px;
margin-top:10px;
text-align:left;
}

Upvotes: 2

Views: 4073

Answers (1)

Alvaro
Alvaro

Reputation: 9682

There is a problem with CSS :focus on iOS Safari.

The answers from this question seem to work. You need to add tabindex="1" to your link:

<a href="#" class="showme" onclick="return false" tabindex="1">View Bio</a>

https://jsfiddle.net/1kqxopzs/

Upvotes: 2

Related Questions