Here's a very weird bug. Having the below code in ...

# compose

[David W]

Here's a very weird bug.
Having the below code in a Card that has a Border (a normal, solid, 1dp non-conditional border) causes the Card's Border to use a horizontal gradient color (and a radial if i change the below to use radial).
The super bizarre thing is that it swaps between using the gradient and showing the expected solid line when I move my mouse around, like a flicker, without any modifiers set up that do things based on mouse movement.

Box(
                    modifier = Modifier
                        .background(
                            brush = Brush.horizontalGradient(
                                colors = listOf(
                                    MaterialTheme.colors.primary.lighten(50).copy(alpha = 0.35f),
                                    Color.Transparent
                                ),
                            )
                        )
                        .size(32.dp)
                )
                {}

[David W]

ah, it's switching to the solid line when a tooltip pops up...hmmm

[David W]

Card code

Card(
            modifier = Modifier
                .wrapContentHeight()
                .border(
                    shape = SmolTheme.smolFullyClippedButtonShape(),
                    border = if (isActiveProfile)
                    // Highlight active profile
                        BorderStroke(
                            width = 4.dp,
                            color = MaterialTheme.colors.onSurface.lighten()
                        )
                    else
                        BorderStroke(
                            width = 1.dp,
                            color = MaterialTheme.colors.surface.lighten()
                        )
                )

[David W]

Both the border and gradient use MaterialTheme.colors.onSurface, and the gradient uses

val alphaOfHoverDimmedElements = animateFloatAsState(if (isBeingHovered) 0.8f else 0.5f).value

[David W]

but I'm using MaterialTheme.colors.onSurface.copy(alpha = alphaOfHoverDimmedElements)

[David W]

so it shouldn't affect the color anywhere else...

[David W]

solved it by adding a

.clipToBounds()

to the Modifier to my gradient-containing Box

[David W]

very very strange behavior

[David W]

having the border of a parent of an element be affected by the child's background brush being a gradient

[Zach Klippenstein (he/him) [MOD]]

Is this on android or desktop?

[David W]

Desktop

[David W]

I tried to come up with a minimum reproducible setup but it was, well, weird

[David W]

"chaos bug" is the phrase

[David W]

like, if I put the gradient code above a specific Text, the bug would happen, but if I moved it below, it wouldn't

[David W]

and it was just a regular Text, nothing odd in there, and both in the same layout

[David W]

I kept expecting to find The Dumb Thing that I was doing, like accidentally mutating shared state, but never did, and then the fix being to add .clipToBounds() more or less confirmed (in my mind) that it's something within Compose

[David W]

unfortunately, my code isn't open source yet - hopefully within the next month it will be, though

[Zach Klippenstein (he/him) [MOD]]

You probably want to post in #compose-desktop then

[David W]

oh, I thought that was for things specific to desktop only

[David W]

is this channel Android-specific?

[Zach Klippenstein (he/him) [MOD]]

If it's a rendering issue on desktop, then it's probably desktop specific

[David W]

I see the channel description is for "Jetpack Compose", which is specific to Android...my bad, didn't catch that.

[David W]

hm, I hadn't made that logical leap and thought it might happen on Android as well, as none of the actual code involved was android-specific.

[David W]

anyway, message understood 🙂 thank you

[Zach Klippenstein (he/him) [MOD]]

If you can repro on android as well that would be even better for troubleshooting. But if you're only seeing it on desktop then I'd ask in the desktop channel