CSS3 filter and issues on retina displays

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! :)