CSS Filter Effects are the new hotness in Safari 6 and iOS 6, and have been around since Chrome 18.  The blurs, shadows, brightness/contrast, hue shifts, and saturation shifting will add a new dimension of visual oomph to sites.  However, one aspect to be aware of is they do not render consistently across different browsers.  The look you’ve fine tuned on Chrome may be hideous on Safari.  Not only do Chrome and Safari render differently, but Safari renders differently than itself!  That is, when applying a 3D transformation, the graphics accelerated rendering path will appear differently than the non-accelerated path.  It is common to use a “-webkit-transform: rotateY(0deg);” as a way to hack Safari to the faster rendering path.  Chrome does not suffer from this issue, and looks consistent across Mac and Windows.  Interestingly, the effects with MobileSafari on iOS are nearly identical to Chrome.

Here’s the same effects (sepia, saturation, hue shift, brightness and contrast increase) viewed across different browsers:

[image removed]

I’ve filed <rdar://problem/12307742> CSS3 Filter Effects rendered inconsistently across Safari CPU path, GPU path, iOS, and Chrome.

If you’re only targeting one platform (or sure it will only use a specific rendering path in Safari), this should not be a problem.  Otherwise make sure to test across the different browsers which support the effects.  As of writing this post, Firefox, IE, and Opera still do not support them.