Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #190552
    launchoverit
    Participant

    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!

    #190640
    launchoverit
    Participant

    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 :(

    #192242
    Chris Coyier
    Keymaster

    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.

    #192252
    launchoverit
    Participant

    Ah yes that works great, thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.