Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?

Question

I recently came across an odd behaviour in Webkit browsers (under OSX at least) which took far longer to resolve than I would like!

Essentially: setting filter

Answer 1

I had to deal with this some time ago because I had to do a filter transition, so I needed it to go zero and not none. Actually, it is kind of a known WebKit bug that only affects retina screens, no matter if it's a @2x image, text or whatever.

To make it work you'll need to add -webkit-transform: translateZ(0);

Works like magic. But don't take my word for it, you can check it out here: http://jsbin.com/OnebuKU/2/edit

Answer 2

try this:

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

Answer 3

As jaicab, I also had to do a filter transition, but using translateZ(0) caused some of my content to be hidden. I found that -webkit-backface-visibility: hidden; removes the blur when using blur(0) and has less side effects (in my case, keeps content visible).

http://jsbin.com/OjeSAHeg/1/edit