6

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:

enter image description here

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?

johnkavanagh
  • 4,614
  • 2
  • 25
  • 37
  • 2
    Nothing is blurred in your example, using OSX and chrome version 31.0 – koningdavid Dec 04 '13 at 14:37
  • @koningdavid sorry, I've just edited the question for more clarity: this is on a MacBook Pro with a retina screen (and on retina iPhone/iPads). I can't verify whether it's a retina-display-only issue though! – johnkavanagh Dec 04 '13 at 14:40
  • 1
    Could be! Normal screen here – koningdavid Dec 04 '13 at 14:41
  • On Retina iOS devices blur(0) and blur(0px) have some blurring applied, but it appears to be the same for both compared to non-blur. Looks like the blur filters baseline is not "the absence of blur". filter: grayscale 0 controls the alpha channel of the filter, but a blur filter is applied "in-place". That's my best guess! – David Hariri Dec 05 '13 at 14:39
  • Blurred too on my Macbook Pro with retina display. Both safari/latest chrome. But no blur is visible on my windows desktop chrome/safari (view on retina via RDP). Seems some blur is applied under OSX chrome/safari even so - it has nothing to do with anti-aliasing in OSX (tested). – Vaclav Kusak Dec 06 '13 at 06:03
  • 1
    I guess it works a bit like when you set : text-shadow: 0 0 ; , it does trigger something in the engine . see this : http://codepen.io/anon/pen/cykbC . It's a bit like to add width:100% to a block element, unless you have a reason , you should not. Same for any CSS rules, reset of a value to zero and none are not the same. Just my opinion :) – G-Cyrillus Dec 06 '13 at 18:55

3 Answers3

5

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

jaicab
  • 236
  • 1
  • 7
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

gabrielmaldi
  • 2,157
  • 2
  • 23
  • 39
1

try this: 

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}
Iman Mohamadi
  • 6,552
  • 3
  • 34
  • 33
  • That really does not help at all, considering the accepted answer helps without being hackish. – Johannes Jander Mar 12 '16 at 08:57
  • the answer did not worked for me so I considered sharing it. Since it's a browser bug, It might help you it might not but it's worth trying. – Iman Mohamadi Mar 12 '16 at 14:03
  • 1
    I voted up. It worked for me.Thanks Iman. Here is how it worked for me. I'm using translateZ(35px) which is making font blur. So this blur filter has made text back to normal. – wp student Jul 24 '16 at 14:54