Fix for greyscale filter causing blurring on retina screens

By Geoff Muskett

For some reason, adding a css filter to in image – opacity, greyscale etc, causes the image to loose it’s sharpness on retina displays.

There’s an easy one-liner fix:

-webkit-transform: translateZ(0);

Add it to your image. Not entirely sure what it does, but a quick search says it accelerates the GPU. So somehow it gets more computer juice. Best be careful not to over use then.


Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.