Zero Opacity Trick

In CSS, some controls are hard to style : the file upload button has almost zero provision for styling. But you can make these controls transparent and add your custom styling beneath ! This becomes a simple matter of layering :
  • draw whatever kind of control you want in Photoshop
  • overlay a zero opacity control over it
  • then your custom control will behave like the one you're styling : the browser handles mouse clicks for transparent elements just as if they were fully visible.

And, we can do the same in Cocoa ! Namely, put a transparent control over a custom view and have the custom view behave as that transparent control.

Image:Zero Opacity Trick.png

In that case, I wanted to have that context menu pop exactly underneath that gray view. Couldn't figure out how to do it, tried the CSS zero opacity trick, and … it almost worked, trailing some repainted trash behind. After enabling Core Animation for the gray view, everything worked OK.

There must be some better way of doing that :), but it's pretty amazing to see how well JS+CSS concepts are close to Cocoa's.

2008 05 26

I would think that the better way would be to include an NSPopupButtonCell that you don't draw but still pass mouse events to.

Patrick Geiller
2008 05 26

Ah yes, using NSPopUpButtonCell's attachPopUpWithFrame:inView: allows you to specify a rect. I hadn't seen that. Thank you !

2008 05 29

That is a very cool idea, but I'm torn because AppKit has never assured that overlapping views work. The Adding and Removing Views from a Hierarchy part of the View Programming Guide warns against it.

In practice, though, I've done this before too.

Patrick Geiller
2008 05 29

Yes, we need to be careful about overlapping : I had an NSTableView slightly overlapping an NSBox, it repainted over the NSBox on scroll.

Note that in this case it worked well only when Core Animation was enabled.


I just got back to that overlapping NSBox, enabling Core Animation removes any repainting problems too. Nice :)

Follow me on Twitter
Planet Cocoa

2011 02 22Distance field
2010 07 202Binding through NSApp
2010 05 122Forwarding invocations
2010 02 272Core Image black fringes
2010 02 21Quickest Way to Shell
2010 02 08Who's calling ?
2009 09 2138 ways to use Blocks in Snow Leopard
2009 08 182Bracket Mess
2009 08 124Taming JavascriptCore within and without WebView
2009 04 15Debugging with Activity Monitor
2009 03 25How Core Image Color Tracking works
2009 03 1510Custom NSThemeFrame
2009 03 10Which framework is running ?
2009 03 074CoreUI can paint pretty big
2009 02 18Localization with functions
2009 01 30Did you forget to nest alloc and init?
2009 01 16JSCocoa on the iPhone
2009 01 11Mixing WebView and JavascriptCore
2009 01 09Badge overflow
2009 01 09Find your Garbage Collection leaks with Instruments

Powered by MediaWiki