CSS过滤器Blur在Cordova应用程序中不起作用，Android 4.4.2，Nexus 4

Question

我试图为我的模态窗口后面的一层应用模糊效果，并且在iOS的WebApp上正常工作，但在Android上失败了。我知道Android刚刚开始使用4.2我相信CSS过滤器。

.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 Inspector应用其他过滤器，并且它们起作用（例如灰度），也尝试将Blur应用于页面上的另一个元素而没有成功。

这是实施中的错误，是因为Blur无法正常工作还是我缺少某些内容？

奇怪的是，Modernizr将CSSFILTERS类添加到HTML中，因此它检测到用户代理能够显示它们。也许它仅测试灰度或现代测试返回true的原因 - 只是旁注。

任何反馈都将不胜感激。

Answer 1

http://caniuse.com/css-filters

查看" Android浏览器"列。这代表了由PhoneGap/Cordova实例化的WebView中使用的库存Android浏览器以及使用的浏览器技术。看起来您需要Android 4.4来进行通用过滤器支持。:(

一般而言，我发现http://caniuse.com对这些小陷阱的很好参考，这些小陷阱与Phonegap/Cordova一起出现在跨平台开发中。

我在台式机上在Chrome上做了我的主要开发项目。我发现，与类似老年硬件的Android浏览器技术相比，这往往更匹配iOS浏览器技术中的功能。因此，在实践中，我不断地制作出在台式机上正常工作的新功能的工作版本，并且在iOS上均处于良好状态。然后，我尝试使用Android，但它不起作用。然后，我咨询http://caniuse.com，然后弄清楚"哦，CSS功能iOS有3个版本？是的，直到Android 4.4 ...

比您要求的要多一点，但随着您的继续时可能会有所帮助。

Answer 2

我遇到了同样的问题。当我使用Android 4.4.2（联想）时，过滤器不起作用。我使用Wenire进行调试，发现Android 4.4.2支持过滤器，但仅在<img>上。它无法在<div>或任何其他元素上使用。