Bug 107487

Summary:

[Safari][CSS Filters] Inconsistent color in element drawn across compositing tiles with filter applied

Product:

WebKit

Reporter:

Max Vujovic <mvujovic>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

achicu, cabanier, krit, michelangelo, simon.fraser, thorton

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac (Intel)

OS:

OS X 10.8

Bug Depends on:

Bug Blocks:

68469

Attachments:

Description	Flags
Reproduction	none
Safari Screenshot	none
Safari Screenshot with Compositing Borders	none
Reproduction 2 - Green Div vs. Green Div with Pass Through Filter	none
Reproduction 2 Safari Screenshot with Tiled Drawing Enabled	none
Reproduction 2 Safari Screenshot with Tiled Drawing Disabled	none

Max Vujovic

Reported 2013-01-21 16:43:47 PST

Created attachment 183852 [details] Reproduction Open the attached reproduction in Safari WebKit nightly r140335. The portion of green div located between y=512px and y=1024px of the document renders with a different shade of green than the rest of the div. Using different color spaces on your monitor may make the issue more or less obvious. This only reproduces in Safari. Chromium and Firefox render the entire div with the same shade of green as Safari does between y=512px and y=1024px.

Attachments
Reproduction (314 bytes, text/html) 2013-01-21 16:43 PST, Max Vujovic	no flags	Details
Safari Screenshot (17.73 KB, image/png) 2013-01-21 16:44 PST, Max Vujovic	no flags	Details
Safari Screenshot with Compositing Borders (20.77 KB, image/png) 2013-01-21 16:45 PST, Max Vujovic	no flags	Details
Reproduction 2 - Green Div vs. Green Div with Pass Through Filter (607 bytes, text/html) 2013-01-31 10:05 PST, Max Vujovic	no flags	Details
Reproduction 2 Safari Screenshot with Tiled Drawing Enabled (1.78 KB, image/png) 2013-01-31 10:07 PST, Max Vujovic	no flags	Details
Reproduction 2 Safari Screenshot with Tiled Drawing Disabled (1.68 KB, image/png) 2013-01-31 10:07 PST, Max Vujovic	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Max Vujovic

Comment 1 2013-01-21 16:44:55 PST

Created attachment 183853 [details] Safari Screenshot

Max Vujovic

Comment 2 2013-01-21 16:45:20 PST

Created attachment 183854 [details] Safari Screenshot with Compositing Borders

Max Vujovic

Comment 3 2013-01-21 16:48:47 PST

If you remove the sepia(0%) filter in the reproduction, the issue disappears. sepia(0%) should be a pass through. It is possible to reproduce this with other filters like blur and drop-shadow as well.

Max Vujovic

Comment 4 2013-01-31 10:05:58 PST

Created attachment 185800 [details] Reproduction 2 - Green Div vs. Green Div with Pass Through Filter Attaching a different reproduction of possibly the same issue. This reproduction might be easier to see. On Safari, Reproduction 2 shows a color difference between: - a div with background-color: #0f0 - a div with background-color: #0f0 and a pass-through filter like grayscale(0). Interestingly, when you "Disable Tiled Drawing in New Tabs" from the Debug menu, the two divs' colors match. Screenshots will follow.

Max Vujovic

Comment 5 2013-01-31 10:07:12 PST

Created attachment 185801 [details] Reproduction 2 Safari Screenshot with Tiled Drawing Enabled

Max Vujovic

Comment 6 2013-01-31 10:07:49 PST

Created attachment 185802 [details] Reproduction 2 Safari Screenshot with Tiled Drawing Disabled

Rik Cabanier

Comment 7 2013-02-28 20:46:59 PST

(In reply to comment #6) > Created an attachment (id=185802) [details] > Reproduction 2 Safari Screenshot with Tiled Drawing Disabled (In reply to comment #0) > Created an attachment (id=183852) [details] > Reproduction > > Open the attached reproduction in Safari WebKit nightly r140335. > > The portion of green div located between y=512px and y=1024px of the document renders with a different shade of green than the rest of the div. > > Using different color spaces on your monitor may make the issue more or less obvious. > > This only reproduces in Safari. Chromium and Firefox render the entire div with the same shade of green as Safari does between y=512px and y=1024px. This seems to be a problem with wkIOSurfaceContextCreate. It sometimes seems to pick an sRGB colorspace instead of an DeviceRGB one. You can verify this by creating a cgContext with sRGBColorSpaceRef() in ImageBufferCG.cpp. After making that change, there are no more seams. Maybe wkIOSurfaceContextCreate tries to create a devicecolorspace and if that fails, it falls back to no color managment

Note You need to log in before you can comment on or make changes to this bug.