Skip to content

Instantly share code, notes, and snippets.

@sidepodcast

sidepodcast/sprites.html

Created October 2, 2014 01:31
Show Gist options
  • Save sidepodcast/bf15aabfce832ce7434e to your computer and use it in GitHub Desktop.
Save sidepodcast/bf15aabfce832ce7434e to your computer and use it in GitHub Desktop.
Download ZIP
Safari 7.1 issue displaying SVG fragments
Raw
sprites.html
<html>
<head>
<style>
p { background: #f5f4ee; }
p:hover { background: #9d8380; }
</style>
</head>
<body>
<p><img src="https://a.sidepodcast.com/svg/sidepodcast-f1-encyclopedia-icons.svg#car" width="100" height="100" alt="Car icon"></p>
<p><img src="https://a.sidepodcast.com/svg/sidepodcast-f1-encyclopedia-icons.svg#chequered-flag" width="100" height="100" alt="Chequered flag icon"></p>
<p><img src="https://a.sidepodcast.com/svg/sidepodcast-f1-encyclopedia-icons.svg#cogs" width="100" height="100" alt="Cogs icon"></p>
<p><img src="https://a.sidepodcast.com/svg/sidepodcast-f1-encyclopedia-icons.svg#car" width="100" height="100" alt="Car icon"></p>
</body>
</html>
Raw
sprites.md

SVG fragment identifiers test

Reduced test case highlighting Safari's issue displaying SVG fragments.

The following works as expected within the latest Chrome/Firefox/Opera browsers, but renders incorrectly in Safari 7.1 on OS X Mavericks and iOS 8.

Correct rendering should display a car, a flag, a set of cogs and then another car.

Sometimes the wrong image is displayed, other times no image at all, and when using hover effects images can be rendered with inline artefacts.

A more extreme example of the problem can be seen at https://sidepodcast.com/f1-encyclopedia

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment