Bug 163956 - Wrong color reproduction of background-image SVG with other background properties
Summary: Wrong color reproduction of background-image SVG with other background proper...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-10-25 11:00 PDT by Paulo
Modified: 2022-10-01 14:58 PDT (History)
6 users (show)

See Also:


Attachments
Bug (190.65 KB, image/png)
2016-10-25 11:00 PDT, Paulo
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Paulo 2016-10-25 11:00:54 PDT
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)
Comment 1 Paulo 2016-10-25 11:01:31 PDT
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
Comment 2 Paulo 2016-10-26 03:05:47 PDT
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
Comment 3 Radar WebKit Bug Importer 2016-11-01 17:01:59 PDT
<rdar://problem/29055556>
Comment 4 Ahmad Saleem 2022-10-01 14:58:43 PDT
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!