New issue
Advanced search Search tips

Issue 911973 link

Starred by 1 user
Status: Duplicate
Merged: issue 904398
Owner: ----
Closed: Dec 5
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Data-URI SVG background image fails to render when it has HEX colors

Reported by shuto...@gmail.com, Dec 5 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3630.0 Safari/537.36

Steps to reproduce the problem:
1. Set background-image CSS property for some HTML element like url('data:image/svg+xml;utf-8,<svg ... fill="#ff0000" ... </svg>').
2. Use HEX colors for SVG image.

What is the expected behavior?
Image is visible.

What went wrong?
Image is not visible.

Did this work before? Yes 71.0.3578.80

Does this work in other browsers? No
 Works in Chrome 70, latest Safari, Edge. Doesn't work in Firefox, IE.

Chrome version: 73.0.3630.0  Channel: canary
OS Version: OS X 10.14.1
Flash Version: 

Example: https://jsfiddle.net/a5g7e8c6/

Both icons should be visible. A workaround is to use rgb() color format or place SVG into HTML directly.

Maybe this issue is related https://bugs.chromium.org/p/chromium/issues/detail?id=123004

Comment 1 by shuto...@gmail.com, Dec 5 

Just upgraded to Chrome 71 and I see a deprecation warning:
[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

So, it looks like an intentional change.

Comment 2 by woxxom@gmail.com, Dec 5 

Bisected to r604399 "[url] Properly treat '#' as marking the start of the fragment in data URIs"
The change is intended and the new behavior is correct according to comment 7 from  bug 904398 :

  Per the URL spec, '#' in a URL (including data URLs) marks the end of the URL body and the start of the fragment [...]
  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 3 by swarnasree.mukkala@chromium.org, Dec 5

Labels: Needs-Triage-M73 Needs-Bisect

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

Mergedinto: 904398
Status: Duplicate (was: Unconfirmed)
►

Sign in to add a comment