Jetpack Compose中Android WebView无法正常渲染Mantine UI组件

背景 #

我用Mantine UI框架开发了一个React网站，在各类浏览器和设备上运行流畅。现在尝试用Jetpack Compose开发Android应用，通过WebView加载该网站时遇到问题：部分Mantine UI组件（如模态框、侧边栏）无法正确渲染，但在Chrome等普通安卓浏览器中显示正常。

问题详情 #

模态框的背景模糊效果正常，但模态框本身及其所有内容都不显示。这个问题仅出现在Android端，网站在普通浏览器和iOS设备上功能完全正常。我已经为WebView授予了包括JavaScript在内的相关权限，但问题依旧存在。

我的WebView代码如下：

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        WebView(context).apply {
             setupWebView(this)
             loadUrl("https://v6.mantine.dev/core/modal/")
        }
    }
)

已尝试操作与观察 #

• 尝试过多种内置WebView的实现方式，均无法解决问题，且确认WebView未缺失必要权限
• 测试了Mozilla GeckoView替代方案，它可以正确渲染Mantine UI组件，但由于Gradle构建配置差异，无法成功集成到项目中

我的Gradle构建配置 #

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
}

android {
    namespace = "com.myapp"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.myapp"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

dependencies {

    implementation("androidx.core:core-ktx:1.12.0")
    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
    implementation("androidx.activity:activity-compose:1.8.1")
    implementation(platform("androidx.compose:compose-bom:2023.08.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")

    implementation("com.squareup.retrofit2:retrofit:2.9.0")
    implementation("com.squareup.retrofit2:converter-gson:2.9.0")
    implementation("com.squareup.okhttp3:logging-interceptor:4.9.0")

    implementation("androidx.compose.material:material-icons-extended:1.5.4")

    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.5")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
    androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00"))
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-tooling")
    debugImplementation("androidx.compose.ui:ui-test-manifest")
}

求助问题 #

1. 是否有人遇到过Jetpack Compose中的Android WebView无法正常渲染Mantine UI组件的问题？
2. 能否针对我的Kotlin Gradle构建配置，提供将Mozilla Geckoview或其他WebView库无缝集成到Jetpack Compose项目的指导？或者给出解决默认WebView问题以确保功能正常的建议？

感谢您提供的任何见解、解决方案或示例！

内容的提问来源于stack exchange，提问作者Glubker