Fixing CSS3 Filter Blur on Retina Displays

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, 2.0s transition to illustrate the blur
second: 0% grayscale filter with hover that turns off the filter immediately
third: image without filter

turtleturtleturtle
Yuck! Fortunately, adding a single line fixes this:

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

turtleturtleturtle
Voila!

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

first row, left: 100% grayscale filter
first row, middle: 0% grayscale filter
first row, right: no filter
second right, left: 100% grayscale filter with translateZ
second row, middle: 0% grayscale filter with translateZ
second row, right: no filter

turtles-for-standard-res

(Turtle photo obtained from Google Images. If you own this and would like it removed, get in touch.)

Comments are closed.