Wrong calculations using the new HazeState

[MohamedRejeb]

Hi,
The new APIs are great and more friendly, but there's an issue when part of the parent gets invisible (When the parent is inside a LazyColumn for example), the boundsInRoot() that is being used to make the position calculations is not the best option for this case because it's ignoring the invisible area of the composable, I'll change it with positionInRoot() which fixes the issue.

Screen.Recording.2023-12-09.at.10.24.23.AM.mov

[chrisbanes]

Hmm. positionInRoot and boundsInRoot are basically the same code, so moving to positionInRoot shouldn't change anything. I've just created a quick chat sample and it works as expected:

Can you share a sample where this isn't working?

Screen.Recording.2023-12-10.at.16.10.30.mov

[MohamedRejeb]

I tried it in Compose Desktop and Compose Web, the parent that receives haze modifier needs to be scrolling as well.

[MohamedRejeb]

Here's and example:

LazyColumn {
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
        ) {
            Image(
                painterResource("image.png"),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxSize()
                    .haze(
                        state = hazeState,
                        backgroundColor = Color(0xFF646464),
                        tint = Color(0x4D646464),
                        blurRadius = 30.dp,
                    )
            )

            Box(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .hazeChild(
                        key = "box",
                        state = hazeState,
                        shape = RoundedCornerShape(10.dp)
                    )
                    .padding(all = 1.5f.spacing)
            ) {
                Text(
                    text = "sample text",
                )
            }
        }
    }
    item {
        // Add some random items so you can have a scroll
    }
}