Bug 163956 – Wrong color reproduction of background-image SVG with other background properties

• Status: NEW
• Component: CSS

[Paulo]

Created attachment 292776 [details]
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: http://codepen.io/paulozoom/pen/jrJQNN/?editors=1100#0

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)

[Paulo]

This seems to be a related bug that I found on Stack Overflow: http://stackoverflow.com/questions/39637347/svg-changes-color-when-rotated-in-safari-10

[Paulo]

I did some asking around for testers:

Happens in:
Safari 10.0.1 (11602.2.14.0.7), OS X 10.11.6
Safari 10.0 (11602.1.50.0.10), OS X 10.11.6

Does NOT happen in:
Safari 9.1 (11601.5.17.1), OS X 10.11.4 (15E65)
Safari 10.0 (12602.1.50.0.10), OS X 10.12

[Radar WebKit Bug Importer]

<rdar://problem/29055556>

[Ahmad Saleem]

From StackOverlfow - I took following:

Link - https://jsfiddle.net/2zv4garu/1/show

and Safari 16 does not seems to reproduce inverted color issue but it has "pixelation" issue on top picture (which is visible, if you zoom in).

Both other browsers (Chrome Canary 108 and Firefox Nightly 107) does not exhibit this pixelation issues (also no invert color issue) and are pixel perfect. Thanks!