IssueTracker

Jetpack Compose version: 1.7.8

Jetpack Compose component(s) used:Modifier.graphicsLayer, Modifier.layout, derivedStateOf

Android Studio Build: #AI-242.23726.103.2422.12816248, built on December 18, 2024

Kotlin version: 2.1.0

the Modifier.graphicsLayer from one Composable functiton are unexpectedly applied to a subsequent Composable function under specific conditions, causing unintended visual results.

Steps to Reproduce or Code Sample to Reproduce:

1. Create a Composable that uses the layout modifier to update a state
2. In the same Composable, use graphicsLayer that reads this state
3. Create a second, unrelated Composable that is called immediately after the first one
4. Have this second Composable use graphicsLayer that reads a derived state

import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.layout
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntSize
import kotlinx.coroutines.launch

@Preview(showBackground = true)
@Composable
fun Sample() {
    Column {
        val scope = rememberCoroutineScope()
        val animate = remember { Animatable(1f) }
        Text(
            text = "Test",
            modifier = Modifier
                .layoutWithGraphicsLayer()
                .clickable {
                    scope.launch {
                        animate.animateTo(0f)
                    }
                },
        )
        val derivedAlpha by remember { derivedStateOf { animate.value } }
        Text(
            "Composable1",
            modifier = Modifier
                .background(Color.Blue)
                .graphicsLayer {
                    this.alpha = derivedAlpha // Just reading the state has an effect
                }
        )
        Text(
            "Composable2",
            modifier = Modifier
                .background(Color.Blue)
                .graphicsLayer {
                    this.alpha = derivedAlpha // Just reading the state has an effect
                },
        )
    }
}


@Composable
fun Modifier.layoutWithGraphicsLayer(): Modifier {
    var measuredSize by remember { mutableStateOf(IntSize.Zero) }
    return layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        measuredSize = IntSize(placeable.width, placeable.height)
        layout(placeable.width, placeable.height) {
            placeable.placeRelative(0, 0)
        }
    }.graphicsLayer {
        this.translationX = measuredSize.width * .5f // Just reading the state has an effect
        this.scaleX = .5f
        this.scaleY = .5f
    }
}

Expected Behavior:

• Each Composable should only apply its own graphicsLayer modifications without affecting or being affected by other Composables

Actual Behavior:

• The transformations (translation, scale) that were applied to the "Test" text via the layoutWithGraphicsLayer() modifier are also being applied to the "Composable1" text, even though they are separate, unrelated Composables.

This appears to be related to how the Compose rendering pipeline handles the graphicsLayer state between Composable recompositions. The graphicsLayer settings seem to persist between Composables rather than being properly isolated.

Here's a workaround I found that resolves the issue:

@Composable
fun Modifier.layoutWithGraphicsLayer(): Modifier {
    var measuredSize by remember { mutableStateOf(IntSize.Zero) }
    // Create a state and derived state that serve no functional purpose
    val workaroundState by animateIntAsState(0)
    val workaroundDerivedState by remember { derivedStateOf { workaroundState } }
    return layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        measuredSize = IntSize(placeable.width, placeable.height)
        layout(placeable.width, placeable.height) {
            placeable.placeRelative(0, 0)
        }
    }.graphicsLayer {
        // Simply reference the dummy derived state to prevent interference
        workaroundDerivedState
        this.translationX = measuredSize.width * .5f
        this.scaleX = .5f
        this.scaleY = .5f
    }
}