title: Hover in Webkit shows original colour at edges
body: <p>I'm using some font icons to represent twitter, Facebook and rss on a site I'm building and they look great. They change to their appropriate colour on hover, when active and on focus and look great on Firefox and Opera.</p>
  
  <p>My problem is with Safari and Chrome on Mac (so I'm assuming webkit). On hover you can see just a tiny bit of white along the edges of one or two of the icons.</p>
  
  <p>I've tried changing the link/visited colour to green and you can see a little of the green on hover, so I know it's the default colour that's being seen.</p>
  
  <p>Have a look at the icons on the left of the footer here: <a href="http://tempertemper.net/index2" rel="nofollow noreferrer">http://tempertemper.net/index2</a></p>
  
  <p>Here are some screen grabs I've taken:</p>
  
  <p><img src="https://i.stack.imgur.com/1Ajjg.png" alt="enter image description here"></p>
  
  <p>The twitter bird doesn't look great against the background but I've still got some tweaks to make. You can just make the white out around its beak. The facebook logo shows it top and bottom and the rss symbol at the left and bottom edges. </p>
  
  <p>Thanks for having a look,</p>
  
  <p>Martin.</p>