Search code examples
cssimagedropshadow

Filter drop-shadow is causing images to blur

I have a png image I'd like to have a subtle drop shadow beneath. So I created a class .drop-shadow 

img.drop-shadow{
    -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));}

However, when I apply this class to an image then it becomes blurry. You can see a screen shot of this before and after at the link below.

Screenshot of blurry image

Is it possible to avoid this blurring? I tried block-shadow but this only works for rectangular images.

Here's the other css applied to the image just incase it is relevant.

img {
display: block;
max-width: 200px;
width: 100%;
margin: 1rem auto;
margin-bottom: $body-line-height;
padding-top: 0;}

Here's a codepen to make it a bit easier http://codepen.io/patrickaltair/pen/cHsbj

Solution

  • This seems to be a bug with the -webkit filters on Retina screens.

    Quick fix: Add this to your css file:

    img {
    -webkit-transform: translateZ(0);
}

    I can't test if it's working, as I don't have a retina screen, but please let me know if it does.