Change theme
Help
Press space for more information.
Show links for this issue (Shortcut: i, l)
Copy issue ID
Previous Issue (Shortcut: k)
Next Issue (Shortcut: j)
Sign in to use full features.
Vote: I am impacted
Notification menu
Refresh (Shortcut: Shift+r)
Go home (Shortcut: u)
Pending code changes (auto-populated)
View issue level access limits(Press Alt + Right arrow for more information)
Unintended behavior
View staffing
Description
1. Flickering Issue: During scrolling (up and down) within the LazyColumn, the WebView flickers each time it is re-rendered.
2. Scrollbar Issue: The vertical scrollbar indicator in the WebView rapidly flashes on and off during scrolling (up and down).
Environment:
1. Jetpack Compose BOM Version: 2024.09.02
2. Jetpack Compose Compiler Version: 1.5.14
3. Kotlin Version: 2.0.0
4. Android Gradle Plugin Version: 8.6.1
Steps to Reproduce:
1. Create a LazyColumn in Jetpack Compose.
2. Add a WebView as an item within the LazyColumn. Ensure that there are other items above the WebView, positioning it near the bottom of the screen, so users need to scroll to see the WebView content.
3. Load any web content into the WebView using loadDataWithBaseURL.
4. Scroll up and down within the LazyColumn.
Example implementation:
@Composable
fun WellWebView(
webContent: String,
modifier: Modifier = Modifier
) {
AndroidView(
modifier = modifier,
factory = { context ->
WebView(context).apply {
@SuppressLint("SetJavaScriptEnabled")
this.settings.javaScriptEnabled = true
// Fix for vertical scrollbar
// isVerticalScrollBarEnabled = false
// Fix for flickering issue
// setBackgroundColor(Color.Transparent.toArgb())
}
},
update = {
it.loadDataWithBaseURL(null, webContent, "text/html; charset=utf-8", "UTF-8", null)
}
)
}
Expected Behavior:
1. The WebView should seamlessly integrate with the LazyColumn without flickering.
2. The WebView should detect that scrolling is managed by the parent (LazyColumn) and suppress its own vertical scrollbar.
Workarounds Applied:
To address these issues, we applied the following workarounds:
1. Flickering Fix: Setting setBackgroundColor(Color.Transparent.toArgb()) on the WebView resolved the flickering issue.
2. Scrollbar Fix: Disabling the vertical scrollbar in the WebView using isVerticalScrollBarEnabled = false prevented the scrollbar indicator from flashing during scrolling.
While these workarounds mitigate the issues, they require additional developer effort and may not cover all use cases. A proper resolution from the framework would improve usability and developer experience.