Foundation-sites: 6.20 Edge Browser - elements with SVG embedded background images not working!

[MetalG3arSo1id]

Things like select boxes have no arrows, as the SVG is not displaying in Edge like the screenshot from foundations own site, yellow highlights no arrow.

I'm guessing any other elements with background SVG's on Edge will not work also.

[colin-marshall]

I'm setting up a VM today so I can test on Edge. According to Can I Use, Edge should have background SVG support.

[colin-marshall]

Found the problem. Edge is turning single quotes to double quotes in the CSS, making the url() value in the CSS invalid. If you flip all of the quotes to make the surrounding quotes double and the inner quotes single, this solves the problem. I don't know if that introduces problems in other browsers, so I'll have to do more testing.

Normal:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>')

In Edge:

background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>")

Tentative Solution:

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>")

[MetalG3arSo1id]

Cool nice find. Edge does so many odd things, thanks Colin

[LDigital84]

I saw this as well. Glad you found a solution.

As FYI: I tested the solution in Edge, Firefox and Chrome (all latest versions) and all work just fine in my test.

Also, I've reported this bug to Microsoft here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/

[colin-marshall]

@Lynda333 thanks for testing and for reporting the bug to Microsoft! I signed up to track progress of it over there. I did some of my own tests and had no issues so I merged the fix into develop.

[haritha2112]

2019 Update with Edge 18:
I guess Edge 18 does not turn single quotes to double quotes anymore in the CSS. With Edge 17 I had that issue and having double quotes solved it. But with Edge 18, having double quotes will recreate the issue :|

So it is safe to say that we can use single quotes in Edge 18.

[DanielRuf]

I guess this will not be relevant anymore in the near future when Edge stable uses Chromium.