Swapping Out SVG Icons – Problems with Mobile Safari

[launchoverit]

I’ve run into some trouble with technique #1 from this article – https://css-tricks.com/swapping-svg-icons/

Rather than using hover, I’d like to use JS to swap out the svg on clicks like so – http://codepen.io/meanspa/pen/vEGERZ

For both desktop and mobile safari that codepen works fine. However, if the svg is actaully pulling from a separate svg-defs file rather than from inline svg earlier in the dom, it fails on mobile safari. When you click the link, it hides the expand link but fails to show the contract link. (Not sure how to show this from within a codepen because of cross-domain-stuff. If it’s helpful, I can share steps I took to test this locally)

Anybody else experiencing this? Am I missing something?

Note: I don’t think it should matter in this case but I did try to take into account this wonderful tip as well – https://css-tricks.com/links-inline-svg-staying-target-events/

I’m using bootstrap, and this is specifically causing a problem when I try to use inline svg’s for the the navbar togggle buttons which I would really really like to do.

Thanks!

[launchoverit]

Dug into this a bit more, and it really does look like if the SVG has display:none when the page loads, mobile webkit browsers don’t actually load it and won’t load it if you try to show it later. So much so that the only consistent way I’ve found of accomplishing this is to hide it with JS after a delay* – http://codepen.io/meanspa/pen/vEGKVO

This seems like a pretty big problem for loading SVG’s with the <use> tag?

*Sadly, the only way I know of to see this in action is to download this codepen, move the SVG’s to an exteranal file, serve it on your local network and view it on an iOS device :(

[Chris Coyier]

Can you try

<svg width="0" height="0">

instead of display: none;?

That’s what I’ve been doing recently instead of inline styles to hide it, just because I’ve also found it buggy.

[launchoverit]

Ah yes that works great, thanks!

[Author]

Posts