Here s a very weird bug Having the below code in a Card that

Question

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 · Answer

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

David W · Answer

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 · Answer

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 · Answer

but I m using `MaterialTheme colors onSurface copy alpha = alphaOfHoverDimmedElements `

David W · Answer

so it shouldn t affect the color anywhere else

David W · Answer

solved it by adding a ``` clipToBounds ``` to the Modifier to my gradient containing Box

David W · Answer

very very strange behavior

David W · Answer

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] · Answer

Is this on android or desktop

David W · Answer

Desktop

David W · Answer

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

David W · Answer

chaos bug is the phrase

David W · Answer

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 · Answer

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

David W · Answer

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 · Answer

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

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

You probably want to post in < C01D6HTPATV|compose desktop> then

David W · Answer

oh I thought that was for things specific to desktop only

David W · Answer

is this channel Android specific

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

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

David W · Answer

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

David W · Answer

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 · Answer

anyway message understood slightly smiling face thank you

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

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