Edge Changes CSS Quotes

I've come across an interesting bug in the Edge browser Microsoft seems to be fixing but hasn't shipped yet. I was happily using an SVG data URI as a background image but had neglected to test my site in Edge. To my horror, when I did my images were completely missing!

After a bit of searching, I found a thread where someone else was having the same issue. It turns out Edge currently replaces single quotes with double quotes! This means that if you supply an SVG data URI in single quotes with double quotes around the attributes inside then when the outer single quotes are converted to doubles your background-image will not be parsed correctly.

Watch out for this bug if you copy and paste an SVG into a data URI if it uses double quotes for the attributes!

Will fail in Edge:

.star-fails {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill="gold"> <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /></svg>');
  display: inline-block;
  width: 24px;
  height: 24px;
}

Will work in Edge:

.star-works {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' fill='gold'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' /></svg>");
  display: inline-block;
  width: 24px;
  height: 24px;
}

Demo

If the demo works correctly you should see two gold stars. The first star uses single quotes around the URL with double for attributes; it is susceptible to the bug in Edge. The second star uses double quotes around the URL and single for attributes; it should work in Edge.

<i className="star-fails"></i>
<i className="star-works"></i>