CSS iPhone Safari - Link dont work with transition

Hallo,

entweder ein Bug oder ich steh auf dem Schlauch:
Hab hier einen Kunden bei dem im Footer 2 Links platziert sind, bei denen per hover und css transition ein span als Unterstrich eingeblendet wird.

Leider kann man bei Safari z. B. auf dem iPhone 5s nicht auf die Links klicken, erst beim 2 mal klicken funktioniert der Link.
Wenn man die css transition weg lässt, geht auch alles ganz normal.

Android habe ich bisher noch keinen derartigen Fehler entdeckt.

Ich hab mal den Code 1zu1 von der betroffenen Seite hier hin geschrieben zum testen.

Wenn einer Rat wüsste... wäre Super!

Danke euch!


PS: ja ich weiß transition bei einem Link auf Smartphones macht nicht sonderlich Sinn. Trotzdem ist es aus meiner momentanen Sicht ein Fehler...

-----------------------------------
Genauere Info zu dem Problem:
https://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

(Ganz große Lösung wird da von Apple selbst vorgeschlagen.... per JavaScript... Im letzten Beitrag der Link... OMG)

-----------------------------------
INFO dazu:

die von Apple vorgeschlagene Lösung " onclick='void(0)' " zu verwenden GEHT NICHT (egal welchem element man es gibt). jQuerys möglichkeit bei on("click".... trigger("click") will auch nicht.


-----------------------------------
Meine nicht ganz schöne Lösung:

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
if(iOS === false) {
var root = document.getElementsByTagName( 'html' )[0].className += " notiOS";
}

und dann hover Effekte nur dann verwenden wenn diese Class notiOS existiert per CSS...

Wenn einer was besseres weiß bitte Posten, danke!