Skip to content

Instantly share code, notes, and snippets.

@rhawbert

rhawbert/bad-safari.html

Last active February 6, 2018 06:19
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rhawbert/05c7a758cb22d2a1ed24 to your computer and use it in GitHub Desktop.
Save rhawbert/05c7a758cb22d2a1ed24 to your computer and use it in GitHub Desktop.
Download ZIP
Safari 8 (iOS & Mac OS) doesn't render injected SVG sprites when defined later, after the actual svg > use tags
Raw
bad-safari.html
<h1>Safari 8 is a no go (iOS & Mac OS)</h1>
<p>Desktop version 8.0 (10600.1.25), Mobile v. 8.0.2</p>
<h2>Before the svg sprite as symbol</h2>
<svg class="icon">
<use xlink:href="#icon-airplane" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none; position:absolute; width:0; height:0;">
<symbol id="icon-airplane" viewBox="0 0 32 32"><path stroke="#449FDB" d="M0 0"/><path d="M24 20l-5.713-5.714L32 4l-4-4-17.14 6.858L5.46 1.46C3.906-.094 1.734-.466.634.634s-.727 3.273.828 4.828l5.396 5.397L0 28l4 4 10.287-13.715L20 23.998v8h4l2-6 6-2v-4h-8z"/></symbol>
<symbol id="icon-book" viewBox="0 0 32 32"><path stroke="#449FDB" d="M0 0"/><path d="M28 4v26H7c-1.657 0-3-1.343-3-3s1.343-3 3-3h19V0H6C3.8 0 2 1.8 2 4v24c0 2.2 1.8 4 4 4h24V4h-2zM8 26h18v2H8z"/></symbol>
</svg>
<h2>After the svg sprite as symbol</h2>
<svg class="icon">
<use xlink:href="#icon-book" />
</svg>
Raw
questions.md

Questions:

Does injecting the SVG before everything, right after opening the <body> hinders page render performance?

Moving the injected SVG to the head solves the render issue, what would happen with page render performance, validation and compatibility (ie)?

PS: live example: http://codepen.io/rhawbert/pen/uAKfw

@legomushroom
Copy link

@tkadlec neat thanks for the comprehensive list. iOS 6 and Opera Mini 11 because they are not really in svg. At least safari 5.1 and Opera 12.1 as I know

@rhawbert
Copy link
Author

rhawbert commented Oct 1, 2014

Appreciated @tkadlec,

Sigh... The biggest offenders here are the ones that doesn't update as often: iOS safari.
Desktop Safari is a modern browser but usage number aren't that high.

Even ie9 kinda behaved quite well (both icons shown).

@legomushroom
Copy link

@rhawbert hehe ie9 behaves much better then even ie10 with svg :)

@JimmyMultani
Copy link

I had to move the <svg> just after the opening <body> tag to have it work on iOS7 and iOS8. Thanks for this information!

@maksof-ashar
Copy link

I have used the svgs directly in the body content, they are running good in other browsers but when i tried to check the site on safari, i get that all the svgs allignment is disturbed secondly animation i putted on some svgs is also not working properly.. Can anyone help me to solve this problem?

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