IOS Material3 ripple increases button size on click

[alaegin]

Describe the bug
Hello!

I use ModalBottomSheet from Material3 with Material3 Button inside. When I click on the edge of the button it changes it's size for several frames causing the whole container to resize, then it returns to the original size. If the click is executed to the center of the button then nothing happens. This behavior is valid only for a few clicks and then it's becomes better.

This issue is only valid for iOS. Exact the same steps doesn't do anything unexpected on Android.

Affected platforms

• iOS

Versions

• Libraries:
  • Compose Multiplatform version: 1.6.11
• Kotlin version: 2.0.0
• Device (model or simulator for iOS issues): Iphone 13 and Iphone 14 Pro Max were tested.

To Reproduce
Steps to reproduce the behavior:

ModalBottomSheet(
    sheetState = bottomSheetState,
    onDismissRequest = { onDismissRequest() },
) {
    Column(
        modifier = Modifier.padding(top = 24.dp, bottom = 24.dp, start = 24.dp, end = 24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 24.dp),
            onClick = onDeleteClick,
        ) {
            Text("delete")
        }

        Button(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 8.dp),
            onClick = onCancelClick,
        ) {
            Text("cancel")
        }
    }
}

I tried to replace the Button with the same-size Box and add a clickable modifier and it works the same way. (bug repeats)

.clickable(
    onClick = onClick,
    indication = rememberRipple(),
    interactionSource = remember { MutableInteractionSource() },
)

But, if I add bounded = false to the ripple, the bug is gone.

.clickable(
    onClick = onClick,
    indication = rememberRipple(bounded = false),
    interactionSource = remember { MutableInteractionSource() },
)

Also, If I remove fillMaxWidth modifier from the button and make the width less than the available space then the issue is gone.

Expected behavior
Button doesn't change it's size when the ripple effect is being drawn.

Screenshots

RPReplay_Final1717503745.MP4

[terrakok]

Reproduced

Screen.Recording.2024-06-04.at.17.10.42.mov

issues_4924 2.zip

[MatkovIvan]

The current workaround is to disable platform layers via

ComposeUIViewController(
    configure = { platformLayers = false }
)

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.