Quotes in CSS Changed by Edge -- and other url(data:<svg>) parsing issues

Fixed Issue #7157459

Details

Author
Lynda S.
Created
Apr 8, 2016
Privacy
This issue is public.
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

https://jsfiddle.net/6gsabpmz/
https://jsfiddle.net/6gsabpmz/1/
https://jsfiddle.net/6gsabpmz/2/

Here is what happens. You have the following CSS:

   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, the single quotations are changed to double quotations:

   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>")

Because of this it breaks and doesn’t render the SVG.
The quotations shouldn’t be changed by Edge but left as they are in the CSS.

This was originally discussed here: https://github.com/zurb/foundation-sites/issues/8545#issuecomment-207209608

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Confirmed”

      Changed Steps to Reproduce

    • Thanks for reporting the issue. We were able to confirm and we added the issue to our backlog.

    • Microsoft Edge Team

      Changed Title from “Quotes in CSS Changed by Edge” to “Quotes in CSS Changed by Edge -- and other url(data:<svg>) parsing issues”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Assigned To from “Kevin B.” to “Patrick R.”

    • Or rather, https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10304656/ is a duplicate of this one. Can’t edit the older comment.

    • This actually is not an issue with quotes. This is a longstanding difference between IE/Edge and Webkit based browsers where they do not require almost any values to be escaped in SVG data uris, and we require the entire value after the “utf8,” to be fully escaped. In the mean time, you can easily accomplish this yourself by using javascript’s built in escape function. That value will work in all browsers today.

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “In progress”

      Changed Assigned To from “Patrick R.” to “Ian P.”

      Changed Assigned To from “Ian P.” to “Adam E.”

      Changed Assigned To from “Adam E.” to “Nishant N.”

      Changed Status from “In progress” to “Confirmed”

      Changed Assigned To from “Nishant N.” to “Adam E.”

      Changed Assigned To from “Adam E.” to “Nishant N.”

      Changed Assigned To from “Nishant N.” to “Rajat J.”

      Changed Status from “Confirmed” to “Fixed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in