- This topic is empty.
December 10, 2014 at 6:29 pm #190552
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!December 11, 2014 at 11:26 am #190640
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 :(January 5, 2015 at 9:42 am #192242Chris CoyierKeymaster
Can you try
<svg width="0" height="0">
That’s what I’ve been doing recently instead of inline styles to hide it, just because I’ve also found it buggy.January 5, 2015 at 10:38 am #192252
Ah yes that works great, thanks!
- The forum ‘CSS’ is closed to new topics and replies.