Resolved: Android Compose webview is stretched

Question:

I want to create with Jetpack Compose a dinamic header that should resize when user scrolls on the main screen content section. The dynamic header works fine, but I have some problem with a WebView.: with Compose when the WebView is rendered, it is stretched and any popup shown to the user are out of the main viewport.
This is an implementation using the old-style XML layout:

We have on the top the fake green dynamic header. The webview is loaded with an initial popup centered into the available screen, as expected.
With compose, the result is the following:

On the top there is the fake gray dynamic header, but the webview is “stretched”, and the initial popup is not centered.
This happens also with a stand-alone WebView, without the dynamic header on top, so this is not an issue created by the dynamic header.

The implementation of the WebView is pretty simple
So what is wrong with this? How we can center the webview, so the user can see all the popup as expected?

Answer:

The base issue is that you’re not reading the scroll from the WebView, and the scroll modifier on the AndroidView composable is not doing what you think it does. A solution is to hoist an event when the webview is scrolled and respond to that: https://gist.github.com/rock3r/65642c73de8602ac40a340c84e20b16a

If you have better answer, please add a comment about this, thank you!