In setting up this site, I decided to look into CSS3 filter properties. After playing around with to see if they would be appropriate, I noticed that when the filter is applied, the image became quite blurry. After googling around quite a bit for a solution, I came across this stackoverflow.com thread that had an excellent solution provided by Jean-Michel Dentand. It looks like it’s a known WebKit bug that only affects computers with retina displays. Despite being a retina display specific bug, the bug exists even if @2x images are properly set up.

For this example I will be using the grayscale filter, but in my testing, all filters are similarly affected. Here’s the code:

first: 100% grayscale filter with a long transition with translateZ
second: 0% grayscale filter with hover that turns off the filter immediately with translateZ
third: image without filter with translateZ

Voila!

For non-retina users this screenshot should help a little bit. The blurring is most prominent on the 100% grayscale image: