android - Css 过滤器模糊在 Cordova 应用程序、Android 4.4.2、Nexus 4 中不起作用

Question

我正在尝试为模态窗口后面的图层应用模糊效果，它在 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 的原因 - 只是一个旁注。

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

Answer 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并弄清楚“哦，iOS 3 版本之前的 CSS 功能？是的，直到 Android 4.4 才支持......”。

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