OSX 10.10 safari 8 using a .svg file as a sprite for background images seems to have various positioning / sizing bugs. When using a SVG sprite as the background for a series of buttons, I had to set the background size and position for each different button. the attached image shows how the buttons looked in all other modern browsers, but safari 8 seemed to push the entire button element down by 5 - 10px. When I used a png as a background image, with the same positioning / sizing attributes, the buttons were styled just as they were in other browsers. Another instance of strange behavior was again using a SVG sprite. But instead of the same bug as presented above, the background-size of the svg did not match other browsers. For instance, I used a background size of 100% auto for a 2 icon stacked sprite. This time I only tested in firefox, chrome and safari and it looked fine in the FF and chrome. In safari, the image was blown up to a much larger size than the others, so that it was cut off by the height & width I had set for the element. As a simple example of what I'm referring to in the paragraph above, here is the CSS I was using on these particular sprites: .ssinfo-icons { background: none; background-repeat: no-repeat; background-size: 100% auto; border: none; padding: 0; position: absolute; top: 0; width: 24px; } #ssninfo_copy { background-image: url(img/sprite-copy.svg); height: 24px; right: 36px; } #ssninfo_copy:hover { background-position: 0 -24px; } #ssninfo_email { background-image: url(img/sprite-email.svg); height: 19px; right: -2px; } #ssninfo_email:hover { background-position: 0 -20px; } --- and here is the markup (these elements are contained within a div set to position relative) <button type="button" id="ssninfo_copy" class="ssinfo-icons"></button> <button type="button" id="ssninfo_email" class="ssinfo-icons"></button> the sprites are available in the zip file i've uploaded as well.
Created attachment 240708 [details] screen shot of first example in bug. svgs for second example.