Using SVG Fragment Identifiers for background images in css with Microsoft Edge 42 (17134)

Question

Fragment identifiers for SVG Images used to work in Microsoft Edge (known issues in Safari). When using the same SVG stack at the same page multiple times (at least 2 times), the latest Edge build (Microsoft Edge 42 Build 17134) shows always the same fragment ID reference Image.

The issue can be reproduced when using the mentioned browser (reload the page multiple times and the shown Icon might Change but is always the same for all three Icons in the following example (can be reproduced with any svg stack):

https://codepen.io/chriscoyier/pen/GndhE

---

HTML

<h3>background-image with #fragment referencing &lt;view></h3>

<span class="icon icon-clock"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-arrow-right"></span>

CSS

.icon {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-arrow-right-view) no-repeat;
}

---

Also reported the issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17787431/

Does anyone know a workaround for this issue that can be implemented as hotfix (CSS or JS) without completely changing the rendering?

Answer 1

UPDATE: One possible Workaround is replacing the *.svg by *.svg?anything . One major disadvantage of this workaround is, that all performance/caching advantages are lost.

updated example: https://codepen.io/jbeargraphics/pen/wXWQLo

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?1#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?2#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?3#icon-arrow-right-view) no-repeat;
}

This is only a quick hotfix (but working). Still looking for a better workaround.

EDIT: This is an optional workaround, not a satisfactory answer to the problem.