Safari greater 9 (desktop and mobile) downloads the external svg file for every icon on page

[codecandies]

This may be a safari bug, but maybe you can dig into this better than me…

In this testcase http://phpscripts.zeit.de/svg-use-testcase/ you can see the problem, by loading and examining it with Chrome and a Safari greater 9 (exact version mentioned on the testcase). The problem is also seen in iOs safari, since 9.2 i guess (inspected with Charles proxy).

The problem

For every combination of the code

<svg class="svg-symbol" role="img" aria-labelledby="title">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#svg-search"></use>
</svg>

the svg file icons.svg is (re-)downloaded by safari browsers. Additionally the file is not cached in the browser or ever served from cache, and the developer tools see this file not as image/svg+xml but as other.

This leads to extreme high content downloads, which is especially on mobile and may not a good development for svg for everybody, I guess. :(

[stefangrund]

Yep, we're experiencing the same bug on every website we're using external SVG sprites in Safari 9+...

[martinwolf]

Yep, same here.

[bjankord]

Here are some screenshots from the network panel in Chrome v50 and Safari v9.1

[martinwolf]

I also made a screencast (in german) showcasing the problem (and a different svg sprite solution).
https://www.youtube.com/watch?v=OAbmDlnq1UE

[bjankord]

@codecandies, @martinwolf, @stefangrund Has anyone filled a bug with webkit about this issue.

[elrumordelaluz]

There are open bugs, (maybe | probably) related, like this or this with comments like:

to my knowledge nobody is working on this at the moment

There is also this one with status: RESOLVED WONTFIX 🤔

However, maybe @dirkschulze knows something.

[hexalys]

Yes I have filed a bug already. See https://bugs.webkit.org/show_bug.cgi?id=156368

[dirkschulze]

@elrumordelaluz This particular issue was closed because it was filed against Chromium. Chromium doesn't use WebKit anymore but the fork Blink.

[codecandies]

https://bugs.webkit.org/show_bug.cgi?id=156368 got a patch meanwhile, so a fix seems on the way, just not sure when it will land in (mobile) Safari.

[dirkschulze]

@codecandies On Twitter I read that branching for WWDC was done yesterday. Usually there is another branch for the shipping product later. In any way it should get into the next version of mobile Safari.

[bjankord]

In terms of a fix for this issue in svg4everybody, I'm guessing an addition to the UA detection for the versions of Safari / Mobile Safari? cc/ @jonathantneal

[fephil]

This was fixed in Safari 9.1.1/IOS 9.3.2. See: https://www.smashingmagazine.com/2016/05/safari-svg-sprite-bug/

Tested it with my projects and can confirm.

[shawnbot]

Cool, so good to close then?

[fephil]

@shawnbot Yep.

[shawnbot]

Sweet, thanks everyone!