I found myself in need of applying a drop shadow to a transparent arrow png, using the supercool technique described here: demosthenes.info
I'm developing a mobile-only version of a web application and so I don't have to worry about supporting legacy browsers.
The result was cool and effortless:
Unfortunately on retina displays the entire image was blurry due to a known webkit bug: Webkit Bugtracker
As pointed out in the bug's comment section there is a workaround to solve this issue, simply adding a translateZ() in your css after the filter declaration:
-webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); -webkit-transform: translateZ(0);
Works like a charm! :)