Filtro CSS3 e problemas em telas retina

Descobri que precisava aplicar uma sombra projetada a uma seta transparente png, usando a técnica de supercool descrita aqui: demosthenes.info

Estou desenvolvendo uma versão somente móvel de um aplicativo da web e, portanto, não preciso me preocupar em oferecer suporte a navegadores legados.

O resultado foi legal e sem esforço:
Cenário

Infelizmente, em telas de retina, a imagem inteira estava borrada devido a um bug conhecido do webkit: Webkit Bugtracker

Conforme apontado na seção de comentários do bug, há uma solução alternativa para resolver esse problema, simplesmente adicionando um translateZ () em seu css após a declaração do filtro:

-webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
-webkit-transform: translateZ(0);

Funciona como um encanto! 🙂