android - -webkit-filter 无法在 Android cordova 应用程序中正常工作

Question

有趣的事情。假设您有一个 div，其中包含一个名为 night-mode 的类，并且此 css 漫游:

.night-mode.night-mode-enabled {
  -webkit-filter: invert(1) hue-rotate(180deg) saturate(80%);
}

点击一个按钮，您可以在应用程序中打开这个非常便宜的夜间模式，但是将 night-mode-enabled 类切换到那些重要的 divs.

在 iOS 中准备、编译、运行，它按预期工作。 所有内容 在 div 中进入较暗的模式，保持相同的颜色但稍微不饱和。

虽然在 Android 中运行...除了特别慢(我不认为 N​​ote 3 是特别慢的手机)，它对那个 div 没有任何作用.然后，我开始使用其他规则组合，例如这些花哨的组合:

.night-mode.night-mode-enabled, 
.night-mode.night-mode-enabled>div *, 
.night-mode.night-mode-enabled * {
  -webkit-filter: invert(1) hue-rotate(180deg) saturate(80%);
}

这样就几乎完成了工作。几乎我的意思是，在某些情况下，它能够反转除了掉落的元素之外的所有东西(我的赌注是 “在上升的偶数中，直到 .night-mode.night-mode-enabled ") 不适用。

这是否与我的 Android Cordova 相当旧 (3.7.1) 而 iOS Cordova 较新 (3.8.0) 有某种关系？

注意:在有人告诉我因为新的 Play Store 要求我需要升级 cordova 之前，我不得不承认这是我下个月的管道中的东西，但这样做太耗时了在发布之后，如果过滤器可以通过 cordova 升级修复，那很好，但如果可以避免，那就更好了。

Answer 1

我没有针对您的过滤器问题的解决方案，但是当我遇到类似问题时，我在正文中注入(inject)了一些具有 CSS 选择器的类。我使用设备插件并创建了这段代码来获取 Android 4.4(只需根据您的需要进行更改):

function onDeviceReady() {
   if (device.platform === "Android") {
      var tmp = device.version.split(".");
      if (parseFloat(tmp[0] + "." + tmp[1]) === 4.4){
         $("body").addClass("API18");
      }
   }
}

如果您需要更深入的设备模型检测，只需从插件中注入(inject)设备模型即可。

如果需要通过名称检测 iOS 机型，可以使用这个列表:https://www.theiphonewiki.com/wiki/Models对于 Android，您可以在此处找到一些型号 http://download.cyanogenmod.org