How to Fix Incomplete Web Styling in Compose WebView?

Question

I'm developing an Android app with Jetpack Compose and planning to implement a built-in web browsing feature. Below is my basic code. I've found that my code works normally (both in styling and layout) when accessing most websites. However, when visiting m.bilibili.com, the styling fails to load completely. I also tested it with the system browser on my Samsung S24, and it displays correctly.

Through debugging, I found that when loading the webpage with WebView, 4 stylesheet files are not being requested, and I have no idea why.

How should I modify my code to make it display correctly?

Here are the results when accessing the site with my WebView and the phone's built-in browser respectively:

my webview

system

@Composable
 fun WebViewPage(
 ) {
 println("[recomposable] - WebViewPage")
 var webViewSource: WebView? by remember { mutableStateOf(null) }
 LaunchedEffect(Unit) {
 delay(2000)
 webViewSource!!.loadUrl("https://m.bilibili.com/")
 }
 AndroidView(
 modifier = Modifier
 .fillMaxSize(),
 factory = { context ->
 webViewSource = WebView(context).apply {
 CookieManager.getInstance().setAcceptThirdPartyCookies(this, true)
 
 settings.javaScriptEnabled = true
 settings.domStorageEnabled = true
 settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
 settings.loadsImagesAutomatically = true
 
 webViewClient = object : WebViewClient() {
 }
 
 loadUrl("about:blank")
 }
 webViewSource!!
 },
 update = { webView ->
 }
 )
 }

Answer 1

BoxWithConstraints(Modifier.fillMaxSize()) {
 val width =
 if (constraints.hasFixedWidth)
 LayoutParams.MATCH_PARENT
 else
 LayoutParams.WRAP_CONTENT
 val height =
 if (constraints.hasFixedHeight)
 LayoutParams.MATCH_PARENT
 else
 LayoutParams.WRAP_CONTENT
 val layoutParams = FrameLayout.LayoutParams(
 width,
 height
 )
 AndroidView(
 modifier = Modifier
 .fillMaxSize(),
 factory = { context ->
 webViewSource = WebView(context).apply {
 this.layoutParams = layoutParams
 settings.javaScriptEnabled = true
 webViewClient = object : WebViewClient() {
 }
 
 loadUrl("about:blank")
 }
 webViewSource!!
 },
 update = { webView ->
 }
 )
}

• user31077472: The final issue was an exception caused by size-related reasons. Referring to the method from github.com/KevinnZou/compose-webview, simply setting this.layoutParams = layoutParams will ensure normal display.