<a>-Tags nicht in Chrome arbeiten

Question

ich auf ein kleines Codepen Projekt für die Praxis arbeitete, unten ist der Code in Frage:

<div class="social-links"> 
    <a href="https://twitter.com/" target="_blank"> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/twitter.svg"> 
    </a> 
    <a href="https://medium.com/" target="_blank"> 
     Link 
    </a> 
    <a href="https://medium.com/" target="_blank"> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg"> 
    </a> 
    <a href="https://medium.com/" target="_blank"> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg"> 
    </a> 
</div> 

Der vollständige Stift-Code ist hier: http://codepen.io/SethHerning/pen/2ecd822daae0fecbdd7b6cafa664b6d7?editors=1100#0 (Zeilen 18 bis 32).

Alle Links funktionieren in Firefox und Edge, obwohl die ersten beiden nicht in Chrome oder Opera. Ich habe den Code über einen Validator ausgeführt und der einzige Fehler ist kein Alt-Attribut für die Tags img. Was fehlt mir, dass alle Links nicht funktionieren?

Answer 1

Sie sind mit Blick auf den 50% Sperr Problem hier definiert: webkit transform blocking link

Es gibt eine Abhilfe aber in Ihrem CodePen Ihre CSS ändern, indem die spezifischen Chrome Stil Zugabe -webkit-transform: rotateY(180deg) translateZ(1px):

.member:hover > div { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg) translateZ(1px); 
} 

Dies ist der Fehler: https://bugs.webkit.org/show_bug.cgi?id=54371