Css 滤镜模糊在 Cordova 应用、Android 4.4.2、Nexus 4 中不起作用答案

【问题标题】：Css filter blur is not working in Cordova app, Android 4.4.2, Nexus 4Css 滤镜模糊在 Cordova 应用、Android 4.4.2、Nexus 4 中不起作用
【发布时间】：2014-03-06 15:36:57
【问题描述】：

我正在尝试为模态窗口后面的图层应用模糊效果，它在 webapp、iOS 上运行良好，但在 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 检查器应用其他过滤器并且它们有效（如灰度），还尝试将模糊应用到页面上的另一个元素但没有成功。

这是模糊不起作用的实现中的错误还是我遗漏了什么？

奇怪的是 Modernizr 将 cssfilters 类添加到 html 中，因此它检测到用户代理能够显示它们。也许它只测试灰度或者这就是 Modernizr 测试返回 true 的原因 - 只是一个旁注。

如有任何反馈，我们将不胜感激。

【问题讨论】：

标签： android css cordova webkit css-filters

【解决方案1】：

http://caniuse.com/css-filters

查看“Android 浏览器”列。这代表了普通的 Android 浏览器，以及由 Phonegap/Cordova 实例化的 WebView 中使用的浏览器技术。看起来您需要 Android 4.4 才能获得一般过滤器支持。 :(

总的来说，我发现http://caniuse.com 是一个很好的参考，这些小问题在使用 Phonegap/Cordova 进行跨平台开发时出现。

我在桌面上的 Chrome 中进行主要开发。我发现这往往更接近于 iOS 浏览器技术中的功能，而不是 Android 浏览器技术，用于类似老化的硬件。所以，在实践中，我不断地制作新功能的工作版本，在桌面上运行良好，在 iOS 上运行良好。然后我在Android上尝试它不起作用。然后我咨询 http://caniuse.com 并弄清楚“哦，那个 CSS 功能 iOS 有 3 个版本？是的，直到 Android 4.4 才支持......”。

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

【讨论】：

谢谢你的回答，我忘了说我有最新版本，我在 Nexus 4 - 版本 4.4.2 上......所以应该支持它，这就是为什么它很奇怪。 .. :(
@NightBoY 如果不接受我的回答，那么我根据“......我相信 4.2”的隐含假设回答了这个问题，那么投票赞成怎么样？
我想在我读到它的时候这样做，但它说我需要 15 分来支持某件事。如果没有人回答我的问题，我会接受它
@NightBoY 由于没有其他人能够提供更好的答案，您是否有机会接受我的回答？谢谢老兄。
@NightBoY 让我挂了... ;)

【解决方案2】：

我和你有同样的问题。当我使用 Android 4.4.2 (lenovo) 时，过滤器不起作用。我使用 wenire 调试，发现 Android 4.4.2 支持过滤器但仅在<img> 上。它不适用于<div> 或任何其他元素。

【讨论】：