This seems to be a Safari exclusive bug, and I can't seem to find any information on why it might even be happening.
It's only on Safari, and only using SVG.
I am using the Data Attribute rollover technique using jQuery.
$("img.rollover").hover (->
imgRolloverSwap($(@))
), ->
imgRolloverSwap($(@))
imgRolloverSwap = ($img)->
srcName = $img.attr('src')
$img.attr('src', $img.data('rollover'))
$img.data('rollover', srcName)
The SVG is embedded with the IMG tag, and basically all it does is switch out the rollover image for the one inside the data attribute.
My HTML is thus:
<div id="social-links">
<a href="https://www.facebook.com/pages/StackCommerce/220449001487225">
<img data-rollover="/assets/img/footer/facebook-rollover.svg" class="rollover" type='image/svg+xml' src="/assets/img/footer/facebook.svg" />
<!-- <img class="rollover" src="/assets/img/footer/facebook.svg" alt="facebook link" target="_blank"> -->
</a>
<a href="https://www.linkedin.com/company/stackcommerce">
<img class="rollover" src="/assets/img/footer/linkedin.svg" alt="linkedin link" target="_blank">
</a>
<a href="https://plus.google.com/u/0/b/104759401634432683234/104759401634432683234/aboute">
<img class="rollover" src="/assets/img/footer/google.svg" alt="google plus link" target="_blank">
</a>
<a href="https://twitter.com/stackcommerce">
<img class="rollover" src="/assets/img/footer/twitter.svg" alt="twitter link" target="_blank">
</a>
</div>
The CSS(Sass) is this:
#social-links {
@extend .col-xs-12, .col-sm-3, .col-md-2;
a {
@extend .col-xs-3, .col-sm-6;
margin-bottom: 15px;
}
img {
@extend .img-responsive;
}
}
However, on first hover the image works, but when you roll off, the image gets smaller.
This happens if you use the jQuery technique or if you use vanilla JS to change out the src name with a regular expression.
This doesn't happen to other image formats, and I have tried setting different 100% widths on nearly every element of the cascade.
Fixes from these threads don't seem to be fixes:
SVG resizes on hover in safari only
Scaling/Resizing SVG in an HTML
Rollover SVG images resizing in Safari and IE
Perhaps someone can shed some light on why this is happening, or a technique to help in Safari?
You can see it here on this page, and at the bottom of it in the footer.
http://beta.stackcommerce.com.s3-website-us-east-1.amazonaws.com/publishers/
Thanks in advance!
