chrisbanes/haze

HazyChild in scrollable won't move with the object when the overscroll effect gets triggered

damianvisser opened this issue · 1 comments

Information

  • Haze version: 0.5.0
  • Platform: Android, Jetpack compose

Hi, I've just found your library and this is something we have been looking for in multiple projects but were never able to implement for Android. Thanks for building this. I did find a bug or maybe something that has not been implemented yet and wanted to let you know.

Expected Behavior

When using hazyChild in a scrollable it should move with the item when overscroll effect gets triggered.

Actual Behavior

When adding hazyChild to lazy column items and scrolling everything works as expected.
However when you pull a bit further and the overscroll effect gets triggered the blur stays in the same place while the item moves, showing the blur next to the item.

Steps to Reproduce the Problem

@Composable
private fun ListExample() {
    val numbers = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14)
    val hazeState = remember { HazeState() }

    Box(modifier = Modifier.fillMaxSize()) {
        Text(
            text = "Background text",
            style = MaterialTheme.typography.headlineLarge,
            modifier = Modifier
                .align(Alignment.Center)
                .haze(hazeState)
        )

        LazyColumn(verticalArrangement = Arrangement.spacedBy(24.dp)) {
            items(numbers) {
                Card(
                    colors = CardDefaults.cardColors(containerColor = Color.Blue.copy(alpha = 0.4f)),
                    modifier = Modifier
                        .padding(24.dp)
                        .hazeChild(hazeState, shape = RoundedCornerShape(16.dp))
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(vertical = 48.dp)
                    ) {
                        Text(text = "item $it", modifier = Modifier.align(Alignment.Center))
                    }
                }
            }
        }
    }
}
hazy-scroll-bug.mp4

Duplicate of #66