Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
codecandies opened this issue Mar 30, 2016 · 15 comments

Comments

@codecandies
Copy link

@codecandies codecandies commented Mar 30, 2016

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
Copy link

@stefangrund stefangrund commented Apr 5, 2016

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

@martinwolf
Copy link

@martinwolf martinwolf commented Apr 5, 2016

Yep, same here.

@bjankord
Copy link

@bjankord bjankord commented Apr 21, 2016

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

chrome-version50

safari-version9 1

@martinwolf
Copy link

@martinwolf martinwolf commented Apr 21, 2016

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

@elrumordelaluz
Copy link

@elrumordelaluz elrumordelaluz commented Apr 21, 2016

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
Copy link

@hexalys hexalys commented Apr 21, 2016

@dirkschulze
Copy link

@dirkschulze dirkschulze commented Apr 25, 2016

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

@codecandies
Copy link
Author

@codecandies codecandies commented Apr 25, 2016

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
Copy link

@dirkschulze dirkschulze commented Apr 25, 2016

@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
Copy link

@bjankord bjankord commented Apr 26, 2016

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
Copy link

@fephil fephil commented Jun 15, 2016

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
Copy link
Collaborator

@shawnbot shawnbot commented Jun 15, 2016

Cool, so good to close then?

@fephil
Copy link

@fephil fephil commented Jun 15, 2016

@shawnbot Yep.

@shawnbot
Copy link
Collaborator

@shawnbot shawnbot commented Jun 15, 2016

Sweet, thanks everyone!

@shawnbot shawnbot closed this Jun 15, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.