Why does filter: blur(0) still cause text to blur under Webkit?
- by johnkavanagh
I've come across a bug today that's taken far longer than I would like to admit to identify.
Essentially: setting a filter: blur(0) (or the vendor-specific -webkit-filter) on an element should - I believe - mean that no form of blur is applied.
However, having tested this today, it would appear that Webkit based browsers still blur the text within any element with either blur(0) or blur(0px) assigned to it.
I've knocked together a quick Fiddle here: http://jsfiddle.net/f9rBE/
These are three identical dixs containing text (no custom fonts):
This has absolutely nothing assigned
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.
One has no styles at all assigned, 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 preview this under Chrome/Safari you'll see that the text in the second two are still blurred:
A few things worth noting:
This unintentional blurring occurs in Safari on iOS7 devices (both iPhones and iPads);
It also occurs on Chrome and Safari under OSX;
It doesn't happen under FireFox in OSX.
Of course, this 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?
Is it possible that this is only prevalent in higher-density resolution devices (ie: retina MacBook/iPhone/iPad)?
With this in mind, how do you actually overwrite an item that has blur applied to it to set it back to non-blurred?
