How to set transparent background?

EderV commented 1 week ago

I'm trying to stack an html on top of an image so I need the HTML to have transparent background.

I set the background color of my html to transparent:

val html =
        """
            <html lang="es">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>HTML sample</title>
                <style>
                    body {
                        background-color: transparent;
                    }
                </style>
            </head>
            <body>
                <script>
                    function handleClick() {
                        window.kmpJsBridge.callNative("Greet", JSON.stringify({message: "Hello"}),
                            function(data) {
                                document.getElementById("subtitle").innerText = data;
                            }
                        )
                    }
                </script>

                <h1>Title h1</h1>
                <h2 id="subtitle">Subtitle</h2>
                <button type="button" onclick="handleClick()">Send message</button>
            </body>
            </html>
        """.trimIndent()

And here is my webview setup:

@Composable
fun NsignHtmlWebview() {
    val webviewState = rememberWebViewStateWithHTMLData(HtmlSample.html)
    val webViewNavigator = rememberWebViewNavigator()
    val jsBridge = rememberWebViewJsBridge(webViewNavigator)

    webviewState.webSettings.apply {
        zoomLevel = 1.0
        isJavaScriptEnabled = true
        logSeverity = KLogSeverity.Debug
        allowFileAccessFromFileURLs = true
        allowUniversalAccessFromFileURLs = true
        desktopWebSettings.apply {
            transparent = true
        }
        backgroundColor = Color.Transparent
    }

    jsBridge.register(GreetJsNativeMessage())

    WebView(
        state = webviewState,
        modifier = Modifier.width(1000.dp).height(1000.dp).padding(100.dp),
        navigator = webViewNavigator,
        webViewJsBridge = jsBridge,
        onCreated = {
            println("On created webview")
        }
    )
}

But is not working. If I set the background-color to another color in css I can se the that color as background but when I set it to transparent, I see the background white. Here the example:

Transparent:

Red:

Hope you can help me. Thanks!

KevinnZou commented 1 week ago

@EderV It seems that you are working on the desktop side. Unfortunately, a transparent background is not supported on the desktop side. @DatL4g are there any other ways to support this feature?

DatL4g commented 1 week ago

The renderer is a heavy component, there is no way of doing this. Maybe you can hack your way down of every component to make their background transparent but this is not officially supported

EderV commented 6 days ago

@KevinnZou @DatL4g are there plans to implement that feature?

Thanks!

KevinnZou / compose-webview-multiplatform

How to set transparent background? #192