The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › iOS does not work with SVG fragment identifier for CSS background image
I’m using SVG sprite and referencing fragment identifiers in it for CSS background image. The CSS code looks like this: background: url(sprite.svg#icon-1);.
It works on Firefox/Win7, Google Chrome/Win7, IE11/Win7, IE10/Win8, and Android 4.4.3. However, it does not work on iOS 9.3.4.
Here is a demonstration on Plunker. (And here is a shorter url for easier accesses for mobile devices: goo.gl/P9xG4E)
Is it possible to get iOS working with this method?
Doesn’t look like it, but there are workarounds http://betravis.github.io/icon-methods/svg-sprite-sheets.html#safari-issues
@Beverleyh Thank you very much. It looks like there is no pure CSS/SVG way to make it work.
Fortunately, I found a polyfill which fixes this issue.