I'm using a LazyVerticalGrid in my app. It general...

# compose-desktop

[dleuck]

I'm using a LazyVerticalGrid in my app. It generally works fine, but for some reason toward the right side of the grid, there are white lines separating the wells (little squared). The placement is utterly random, and I can't get rid of them. Has anyone else had this problem? How do I get rid of these strange white lines? Note: they appear with or without the showBorders property. I've attached a screen shot. Note: You will have to see the image at its natural size (i.e. not the preview) to see the lines. Otherwise they are too small to see.

// Create a LazyVerticalGrid for the wells
        LazyVerticalGrid(
            columns = GridCells.Fixed(plate.columns), // Set the number of columns
            modifier = Modifier.fillMaxWidth()
        ) {
            items(plate.rows * plate.columns) { index ->
                // Calculate the row and column for the current index
                val row = index / plate.columns + 1
                val col = index % plate.columns + 1
                val well = plate[Plate.numberToRowIdentifier(row), col]

                // Optionally show borders between the wells
                val wellModifier = Modifier
                    .aspectRatio(1f) // Ensure each well is square
                    .then(
                        if (showGridBorders) Modifier.border(1.dp, Color.Gray)
                        else Modifier // No border by default
                    )

                wellUI(well = well, modifier = wellModifier)
            }
        }

[romainguy]

Could be a float precision issue/accumulation error

[dleuck]

@romainguy Thank you for your response.

That's possible, although I would think a floating point precision error wouldn't have such a random pattern.

[dleuck]

...just a little space at the end of the rows and / or columns.

[Michael Paus]

Why do you call that “random”? As far as I can see all these horizontal white lines start at exactly the same column and then extend to the right. I’d call this quite deterministic and I also think this looks like a floating point problem.

[dleuck]

@Michael Paus You're right. I've been working with this for hours, and my eyes were tricked by light colored wells (the small squares), especially when they are stacked, obscuring the white line.

Now I agree its probably a floating point problem. At least that is a step closer.

[dleuck]

OK. I appreciate the diagnosis, but does anyone have a cure? This is bizarre behavior for fractional pixel rendering. Normally the background color would be filled in. You don't see this in HTML / CSS, SwiftUI, Swing, etc. @Michael Paus @romainguy

[Skaldebane]

It definitely does happen with HTML/CSS. The browser tries to compensate in certain cases, but in certain UIs it's just unavoidable

[dleuck]

@Skaldebane I have never seen artifacts like those in the image I provided above in HTML/CSS. Can you give us an example? Chrome and Safari's rendering engines certainly don't do that. This was resolved by using a Canvas composable to paint everything and implement behaviors from scratch. It wasted a day, but was well worth it. There are no artifacts and the resizing behavior is exactly what I wanted. I appreciate the responsiveness of this community. They provided good direction.