Skip to content

Instantly share code, notes, and snippets.

@rhawbert

rhawbert/bad-safari.html

Last active Feb 6, 2018
Embed
What would you like to do?
Safari 8 (iOS & Mac OS) doesn't render injected SVG sprites when defined later, after the actual svg > use tags
<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>

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

This comment has been minimized.

Copy link

@legomushroom legomushroom commented Oct 1, 2014

If you add the 'display:none' property it won't be in rendering tree any more, so it won't affect rendering performance at all. You can be concerned about bigger DOM size, but I think the difference is really noteless

@legomushroom

This comment has been minimized.

Copy link

@legomushroom legomushroom commented Oct 1, 2014

You can also use a script to load your icons, so it would be deferred and cached. https://gist.github.com/legomushroom/7689480

@SaraSoueidan

This comment has been minimized.

Copy link

@SaraSoueidan SaraSoueidan commented Oct 1, 2014

@legomushroom Thanks for the tip! What about is the display: none is removed? Would placing it in <body> or <head> be any different?

@rhawbert

This comment has been minimized.

Copy link
Owner Author

@rhawbert rhawbert commented Oct 1, 2014

@legomushroom Also the reason the problem shown up is because of PE tests I was doing... so loading an external SVG isn't possible in this scenario, since the SVG is actualy injected in the markup in order to reduce the number of requests, latency, etc.

@FWeinb

This comment has been minimized.

@legomushroom

This comment has been minimized.

Copy link

@legomushroom legomushroom commented Oct 1, 2014

@SaraSoueidan you are welcome! :) the only concern about placing it in head would be slightly increased html parsing time, because it parsed from top to bottom, but should be negligible. So it more about page load time but not rendering performance. I think it is better to preserve display:none property, to prevent it to be in rendering tree. Placing it in the head tag automatically does that, because everything inside it doesn't render by default

@rhawbert

This comment has been minimized.

Copy link
Owner Author

@rhawbert rhawbert commented Oct 1, 2014

That was quite helpful. Thank you @FWeinb

@rhawbert

This comment has been minimized.

Copy link
Owner Author

@rhawbert rhawbert commented Oct 1, 2014

Thanks @legomushroom, very clarifying remarks. I think @SaraSoueidan said on twitter that Mobile devices would suffer a bit more with html parsing... I mean, those (minified) SVGs sure can get big as the amount of icons increases on a website... any thoughts?

@tkadlec

This comment has been minimized.

Copy link

@tkadlec tkadlec commented Oct 1, 2014

Here are a few quick results for what shows up. I can run more tests later if you'd like. We may be able to actually automate this to some extent and toss the results the Browserscope.

  • iOS7: After only
  • Chrome 37: Both
  • Android 4.4.4 WebView (~Chrome 33): After only
  • IE10 (Windows Phone 8): Both
  • iOS6: Neither!
  • Android 4.1.1 WebView: Both
  • Android 4.1.1 Browser (S3): Both
  • FF Mobile 23: Both
  • UC 8.6: Neither!
  • Opera Mini 11.10: Neither!
  • Opera Mobile 24: Both
  • FF Mobile 32: Both
@rhawbert

This comment has been minimized.

Copy link
Owner Author

@rhawbert rhawbert commented Oct 1, 2014

Thanks @tkadlec... very inconcistent browser behaviours thou. I'd love to see how Desktop Safari 6 & 7 would perform.

@tkadlec

This comment has been minimized.

Copy link

@tkadlec tkadlec commented Oct 1, 2014

Sure thing, @rhawbert.

Safari 7: After only
Safari 6.1: After only

@legomushroom

This comment has been minimized.

Copy link

@legomushroom legomushroom commented Oct 1, 2014

@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

This comment has been minimized.

Copy link
Owner Author

@rhawbert 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

This comment has been minimized.

Copy link

@legomushroom legomushroom commented Oct 1, 2014

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

@JimmyMultani

This comment has been minimized.

Copy link

@JimmyMultani JimmyMultani commented Aug 6, 2015

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

This comment has been minimized.

Copy link

@maksof-ashar maksof-ashar commented Dec 1, 2017

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