0

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, Firefox/Android 4.4.2, and Google Chrome/Android 4.4.2. 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?

== Update ==
On Android 4.4.2, unlike Firefox and Google Chrome, the built-in Android browser does not support the feature.

Ian Y.
  • 2,293
  • 6
  • 39
  • 55

2 Answers2

2

Can I Use tells us that this is not supported on Safari (Mac or iOS).

Also note that it wasn't supported on Android browser up to 4.4.4, which are still quite common, and some other browsers have limitations.

jcaron
  • 17,302
  • 6
  • 32
  • 46
  • Thank you for the information. It looks like there is no pure CSS/SVG way to make it work. Fortunately, I found [a polyfill](https://github.com/preciousforever/SVG-Stacker/blob/master/fixsvgstack.jquery.js) which works for me. – Ian Y. Sep 04 '16 at 11:27
1

I found a polyfill which fixes WebKit browsers' this issue. And it works for me.

Please check its demonstration for implementation.

Ian Y.
  • 2,293
  • 6
  • 39
  • 55