Css filter blur is not working in Cordova app, Android 4.4.2, Nexus 4

Question

I am trying to apply a blur effect for a layer behind my modal window and it works fine on webapp, iOS but it fails on Android. I know Android just started to support css filters with 4.2 I belive.

.blurred {
  margin: -5px -10px;
  -webkit-filter: blur(2px);
  filter: blur(10px);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

I tried using Chrome inspector to apply other filters and they worked (like grayscale), also tried applying blur to another element on the page without success.

Is this a bug in implementation that blur is not working or am I missing something?

Strange thing is that Modernizr adds cssfilters class to the html so it detects that the user agent is capable of displaying them. Maybe it only tests for grayscale or something that is why Modernizr test returns true - just a side note.

Any feedback would be appreciated.

Answer 1

http://caniuse.com/css-filters

Look at the "Android Browser" column. This represent the stock Android Browser and also the browser technology used in the WebView that gets instantiated by Phonegap/Cordova. Looks like you need Android 4.4 for general filter support. :(

In general I am finding http://caniuse.com a great reference for these little gotchas that pop up in cross platform development with Phonegap/Cordova.

I do my main development in Chrome on the desktop. I find this tends to match more closely the capabilities in the iOS browser tech than the Android browser tech for similarly aged hardware. So, in practice I keep continually making working versions of new features that work fine on desktop and fine on iOS. Then I try on Android and it doesn't work. Then I consult http://caniuse.com and figure out "oh, that CSS feature iOS had 3 version ago? Yeah, that won't be supported until Android 4.4...".

A little more than you asked for but may be helpful as you continue along.