title: Weird bug with SVG in Link in Chrome
body: <p>I wrote some CSS for underline animations when hovering over a link, and everything works fine in Firefox, but in Chrome I noticed a bug (?):</p>
  
  <p>I have some SVG social icons wrappend in an <code>&lt;a&gt;&lt;/a&gt;</code> with a <code>border-radius</code> of <code>50%</code> to display them as circles. When I hover over <strong>my other <code>&lt;a&gt;</code> tags</strong> however, the SVG icon flickers and gets a <em>square</em> background.
  I created a small example on <a href="http://codepen.io/cmichel/pen/VmZQrR" rel="nofollow noreferrer">codepen</a>.</p>
  
  <p>Why does this happen - the text link and the SVG link should not influence each other, no? Does anyone have an idea on how to fix it?</p>