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

• Component: Layout and Rendering
• Status: NEW ---

[Max Vujovic]

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.

[Max Vujovic]

Created attachment 183853 [details]
Safari Screenshot

[Max Vujovic]

Created attachment 183854 [details]
Safari Screenshot with Compositing Borders

[Max Vujovic]

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]

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]

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

[Max Vujovic]

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

[Rik Cabanier]

(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