Ionic 跨平台应用程序在 Android API 26+

我们正在通过 ionic-capacitor 开发跨平台应用程序，我正在调查使用 API26+（Android 8 及更高版本）的 Android 设备上发生的错误/错误。 应用的 webView 和 iOS 原生版本看起来很正常，没有白色的灰色阴影。

same app on different devices

首先我认为必须在 css 中的某处设置一个 alpha 值，但它也应该出现在 iOS 或 webView 中。 我尝试的下一件事是通过 Chrome 检查设备，检查设备以白色显示颜色，本机屏幕以这种灰度显示颜色。 因此，我的结论是该错误必须在 Android 中，我发现“灰色阴影”仅出现在 Android 8 或更高版本上，如屏幕截图所示。

有人可以告诉/帮助我这个灰色阴影可能来自哪里或者我如何调查这个吗？

我们使用 BridgeFragment 加载 WebView：

abstract class FemSenseBridgeFragment : BridgeFragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        super.addPlugin(FemSenseCapacitor::class.java)
        val urlSuffix = getUrlSuffix()
        FemSenseCapacitor.setUrlSuffix(urlSuffix)
    }

    abstract fun getUrlSuffix(): String

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = super.onCreateView(inflater, container, savedInstanceState)
        val webView = view?.findViewById<CapacitorWebView>(R.id.webview)
        if (webView != null) {
            val settings = webView.settings
            settings.userAgentString = AppEnvironment.current.userAgent
        }
        return view
    }
}

我们正在使用的 deps：

   "@capacitor/core": "^2.4.5",
    "@capacitor/ios": "^2.4.5",
    "@capacitor/android": "^2.4.5",
    "@ionic/react": "^5.4.1",
    "@ionic/react-router": "^5.4.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@reduxjs/toolkit": "^1.4.0",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.6",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "@types/react-redux": "^7.1.10",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-slick": "^0.23.4",
    "axios": "^0.21.0",
    "firebase": "^8.2.0",
    "i18next": "^19.8.3",
    "i18next-http-backend": "^1.0.21",
    "ionicons": "^5.2.3",
    "jquery": "^3.5.1",
    "node-sass": "^4.14.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-i18next": "^11.7.3",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-slick": "^0.27.13",
    "eslint-webpack-plugin": "^2.4.1",
    "slick-carousel": "^1.8.1",
    "typescript": "4.0.5"