[WebView] Flickering when used inside a HorizontalPager

[tbra91]

Description

When using a WebView inside a HorizontalPager there is very noticeable flickering when changing pages.

This seems to be a regression in v0.31.6-rc. I first noticed this issue in versions v0.28 and earlier, but it was fixed in v0.29 onwards, and has now reappeared in v0.31.6-rc. v0.31.5-beta is fine.

A video of the issue can be seen here.

Steps to reproduce

Run the following sample with a few different URLs:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun WebViewPager(
    urls: List<String>,
    modifier: Modifier = Modifier
){
    val coroutineScope = rememberCoroutineScope()
    val pagerState = rememberPagerState(pageCount = { urls.size })

    Column(modifier = modifier) {
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.weight(1f),
            beyondBoundsPageCount = Int.MAX_VALUE,
            userScrollEnabled = false
        ) { page ->
            WebView(state = rememberWebViewState(url = urls[page]))
        }

        WebViewPagerButtons(
            onPrevClick = {
                coroutineScope.launch {
                    if (pagerState.currentPage > 0) {
                        pagerState.animateScrollToPage(pagerState.currentPage - 1)
                    }
                }
            },
            onNextClick = {
                coroutineScope.launch {
                    if (pagerState.currentPage < pagerState.pageCount) {
                        pagerState.animateScrollToPage(pagerState.currentPage + 1)
                    }
                }
            },
            modifier = Modifier.fillMaxWidth()
        )
    }
}

@Composable
fun WebViewPagerButtons(
    onPrevClick: () -> Unit,
    onNextClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Button(onClick = onPrevClick) {
            Text(text = "Previous")
        }

        Button(onClick = onNextClick) {
            Text(text = "Next")
        }
    }
}

Expected behavior

Page changes are smooth with no flickering.

Additional context

Going by the changes this may be due to #1684.

Possibly related to #1692.

This sample also reproduces #1687 when setting userScrollEnabled = true on the HorizontalPager (hence the usage of buttons for paging).

[bentrengrove]

Unfortunately Accompanist WebView has been deprecated and won't be supported going forwards. I am closing this issue. We recommend you fork the implemenation here and customise it to your needs. For more information please see our update blog