New issue
Advanced search Search tips

Issue 904398 link

Starred by 3 users
Status: WontFix
Owner:
smcgruer@chromium.org
Closed: Nov 12
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

SVG data URL background image not rendered

Reported by cristian...@gmail.com, Nov 12 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15

Steps to reproduce the problem:
apply this CSS to an element (set width/height for it, to see the content):
```
background: #FF0000 url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 …4 15.0606602,21.9393398 L21.5,28.3786797 L34.8143398,15.0643398 Z'/></svg>) no-repeat;
background-size: cover;
```

What is the expected behavior?
You should see a checkbox on top of the red background

What went wrong?
the background image is not rendered

Did this work before? Yes 

Does this work in other browsers? Yes

Chrome version: Version 72.0.3606.0 (Developer Build) (64-bit)  Channel: dev
OS Version: OS X 10.13.6
Flash Version:
chromium.png
23.9 KB View Download

Comment 1 by woxxom@gmail.com, Nov 12 

The code is incomplete and ... is substituted for the inner part.
Please attach an html file that clearly shows the problem.

Comment 2 by f...@opera.com, Nov 12

Labels: Needs-Feedback

Comment 3 by cristian...@gmail.com, Nov 12 

Here it is
sample.html
848 bytes View Download
chrome_70.png
32.8 KB View Download
chromium_72.png
32.9 KB View Download
Project Member

Comment 4 by sheriffbot@chromium.org, Nov 12

Cc: f...@opera.com
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 5 by f...@opera.com, Nov 12

Labels: Needs-Bisect
My suspicion would be that the:

fill='#fff'

needs to be replaced with:

fill='%23fff'

but let's bisect to be sure.

Comment 6 by f...@opera.com, Nov 12

Cc: -f...@opera.com
Labels: -Needs-Bisect
Owner: smcgruer@chromium.org
Status: Assigned (was: Unconfirmed)
As expected this bisected to:

https://chromium.googlesource.com/chromium/src/+/b52ebdc80dde907896fdf8bafc231e30b348b30b

over to smcgruer in case he's keeping tabs on the long tail.

Comment 7 by smcgruer@chromium.org, Nov 12

Status: WontFix (was: Assigned)
fs@ is correct. Per the URL spec, '#' in a URL (including data URLs) marks the end of the URL body and the start of the fragment. That means that the actual SVG here is:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='

Since this is invalid XML, it renders to nothing.

Historically Chrome did not adhere to the spec and incorrectly allowed '#' in data URIs, but we have deprecated that behavior (a warning has been shown in the devtools console for the last ~6 versions of Chrome) since it is neither web nor other browser compatible (try opening the reproduction in Firefox; the tick will not render).

Please encode '#' as '%23' when using data URLs. Thanks!

Comment 8 Deleted

Comment 9 by cristian...@gmail.com, Nov 12 

Yes, it worked. Thanks!

Comment 10 by dtapu...@chromium.org, Dec 5 

 Issue 911973  has been merged into this issue.
►

Sign in to add a comment