I am currently facing an issue with creating image links from an SVG spritesheet that is causing cross-browser problems between Chrome, Safari, and Firefox. Here are some of the anchor tags I am using:
<a href="#" id="twitter-logo" class="socialIcon"></a>
<a href="#" id="facebook-logo" class="socialIcon"></a>
Then in my CSS, I have set up the background image for all of them.
.socialIcons{
background-image: url('../img/social.svg');
width: 60px;
height: 60px;
display: inline-block;
}
#twitter-logo{background-position: 0px 0px;}
#twitter-logo:hover{background-position: 0px -200px;}
#facebook-logo{background-position: -79px 0px}
#facebook-logo:hover{background-position: -79px -200px;}
While this setup works well in Firefox and Safari, there seems to be a discrepancy in Chrome where the SVG file appears 2 pixels higher than in other browsers. As a result, the top of my icons sits 2 pixels below the top of my <a> element, cutting off the icons by 2 pixels. Although I can adjust the background-position y-values by subtracting 2, this causes issues in Safari and Firefox.
The question remains, where is this mysterious shift originating from?