CSS滤镜模糊不科尔多瓦应用工作，是Android 4.4.2，的Nexus 4 [英] Css filter blur is not working in Cordova app, Android 4.4.2, Nexus 4

问题描述

我想申请我的模式窗口后面层的模糊效果，并能正常工作的Web应用程序，iOS的，但它在Android上失败。我知道Android的刚刚开始支持CSS滤镜4.2我相信。

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;
}

我试着使用Chrome检查器应用其他过滤器和他们的工作（如灰度），也试过没有成功页面上的应用模糊到另一个元素。

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.

这是实施的模糊不工作还是我失去了一些东西？一个bug

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

奇怪的是，Modernizr的增加cssfilters类的HTML所以它检测到用户代理能够显示它们。也许这只是测试灰度或东西，这就是为什么Modernizr的测试返回真 - 只是一个侧面说明

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.

任何反馈将是AP preciated。

Any feedback would be appreciated.

推荐答案

http://caniuse.com/css-filters

查看Android浏览器栏。这将重新present股票Android浏览器，并在得到由PhoneGap的/科尔多瓦实例化的WebView中使用的浏览器技术。看起来你需要通用过滤器支持Android 4.4系统。 :(

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. :(

在一般我发现 http://caniuse.com 为弹出的跨平台的开发与PhoneGap的这些小陷阱有很大的参考/科尔多瓦。

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.

我在桌面上我在Chrome的主要发展。我觉得这往往会更紧密地匹配iOS的浏览器技术比Android浏览器为高新技术年龄相似的硬件功能。
因此，在实践中我一直在不断的态势，做工精细的台式机和罚款在iOS的新功能的工作版本。然后，我尝试在Android和它不工作。后来我咨询 http://caniuse.com 并弄清楚哦，那CSS功能的iOS有3个版本前？是啊，不会是直到支持Android 4.4的......

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.

这篇关于CSS滤镜模糊不科尔多瓦应用工作，是Android 4.4.2，的Nexus 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！