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: blur(0) (or the vendor-specific -webkit-filter) on an element should mean that no form of blur is applied to the element.

However Webkit still blurs the element when either blur(0) or zeroing with a unit specified (ie: blur(0px)) is assigned to it.

I've knocked together a quick Fiddle here to demonstrate: http://jsfiddle.net/f9rBE/

This shows three identical divs containing text (no custom fonts):

<div class="no-blur">
    <p><strong>This has absolutely nothing assigned</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis orci in quam venenatis, in tempus ipsum sagittis. Suspendisse potenti. Donec ullamcorper lacus vel odio accumsan, vel aliquam libero tempor. Praesent nec libero venenatis, ultrices arcu non, luctus quam. Morbi scelerisque sit amet turpis sit amet tincidunt. Praesent semper erat non purus pretium consequat. Aenean et iaculis turpis. Curabitur diam tellus, consectetur non massa et, commodo venenatis metus.</p>
</div>

One has no style at all assigned to it whilst the other two have blur(0) and blur(0px):

.no-blur{}
.zero-px-blur{
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

.zero-blur{
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
}

If you take a look in Safari or Chrome, the bottom two are blurred:

A few things worth noting:

• This unintentional blurring also occurs in Safari on iOS7 devices (both iPhones and iPads);
• It also occurs on Chrome and Safari under OSX;
• It doesn't appear to occur under Chrome and Safari on non-retina Apple hardware;
• It doesn't happen under FireFox in OSX.

Of course, filter: blur isn't supported at all in Firefox just yet so it's hard to tell whether the behaviour I'm seeing is intentional/expected behaviour, or whether this is a bug in Webkit?

I eventually came to the conclusion that using blur(none) instead had the desired effect (ie: removed all blur effects), but I'm confused as to why using zero doesn't have the same effect given that in other filter examples (eg: filter: grayscale) can be reset simply using zero rather than the none keyword.

Why is this?

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

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