I have a semi transparent NSView that I’m using as a shade to dim out the main window while a modal window is displayed as a sheet in my Cocoa app (OS X Yosemite).
See Update section, below, for isolated sample project.
The shade gets displayed properly but where it overlays other components lower down in the view hierarchy, the backgrounds of those components are becoming visible and being rendered semi-transparently (while they should remain entirely transparent).
In the screenshot above, you can see the shade covering a progress indicator (the small square) and half of an NSTextField (label). The half that the sheet is covering is rendered incorrectly with the background; the other half is rendered normally.
The components lower down on the view hierarchy are on an NSVisualEffectView set to blending mode Behind Window, material Light, and appearance Vibrant Light and with setWantsLayer set to true.
I have a feeling there’s something I’m missing about the composition interaction between layer based NSVisualEffectViews and NSViews.
I’d appreciate your thoughts on what might be causing the incorrect rendering as I’m still very new to the intricacies of Cocoa. Thanks!
Update
I just made a quick isolated test case to demonstrate the issue. You can clone it from here.
It also demonstrates the problem happening for one image with alpha (the corner indicator) and not another (the star)
Workaround
The workaround, thanks to Daniel Chote (see tweet), is to manually set the background colour to transparent on all components. As Daniel mentions, “horrid solution”, but a solution at least :)
(Just make sure to remember to turn Draws Background on before scratching your head as to why it still isn’t working.) :)
If anyone has any better solutions, I’m all ears. Will wait a bit and, if I don’t hear anything, will file a radar.
