<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Wrong color reproduction of background-image SVG with other background properties"
href="https://bugs.webkit.org/show_bug.cgi?id=163956">163956</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Wrong color reproduction of background-image SVG with other background properties
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 10
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>hi@paulo.is
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=292776" name="attach_292776" title="Bug">attachment 292776</a> <a href="attachment.cgi?id=292776&action=edit" title="Bug">[details]</a></span>
Bug
I’m using a SVG as a background image on an element (as a data URI). However, when using background-attachment and/or background-size on the same element, the fill colors of said SVG aren't reproduced correctly. They seem inverted. Blues become oranges or reds, for example.
I’ve created this Codepen with an example: <a href="http://codepen.io/paulozoom/pen/jrJQNN/?editors=1100#0">http://codepen.io/paulozoom/pen/jrJQNN/?editors=1100#0</a>
The arrows should be a slightly darker blue than the background. However, it renders as the attachment shows, in orange. However, commenting the background-size and background-attachment properties makes the color render normally.
Computer/OS:
MBP (13-in, Mid 2009)
El Capitan 10.11.6
Browsers:
Safari 10.0.1 (11602.2.14.0.7)
Safari Technology Preview Release 15 (Safari 10.1, WebKit 11603.1.8)
Webkit Nightly (downloaded one hour ago)</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>