Small ripple glitch with material3 Switch on iOS and Desktop

[alexzhirkevich]

Describe the bug material3 Switch ripple appears lower then needed when switch is toggled off

Affected platforms

• iOS
• Desktop

Versions

• Kotlin version*: 1.8.20
• Compose Multiplatform version*: 1.4.0

To Reproduce Display material3 Switch, toggle on, toggle off

https://user-images.githubusercontent.com/63979218/232333487-9487b0fb-1d20-4051-97a6-63fa05c60951.mov

Expected behavior Works well on Android:

https://user-images.githubusercontent.com/63979218/232333490-46d913e7-0975-4d31-9b33-1119f12e6580.mov

[dima-avdeev-jb]

Same bug appears on Desktop with material3 Switch

[dima-avdeev-jb]

We can fix it after merging with stable material3 in androidx repository

[alexzhirkevich]

UPD: issue still exists after merge with stable m3 :(

[alexzhirkevich]

Found the cause.

Indication animation breaks if size of the component it applied to changes during the animation. See this. If we set fixed size insted of dynamic thumbSizeDp variable the issue dissapear

[vlohachov]

Same issue appears for wasmJs target with: CMP - v1.6.11 and Material3 - v1.2.1

https://github.com/JetBrains/compose-multiplatform/assets/115993681/3884fe9d-7c77-425c-af9f-c1e718896e3c

https://github.com/JetBrains/compose-multiplatform/assets/115993681/cd3a02d8-a124-46de-bdc9-315090f4cf80

[vlohachov]

Found the cause.

Indication animation breaks if size of the component it applied to changes during the animation. See this. If we set fixed size insted of dynamic thumbSizeDp variable the issue dissapear

I believe it should be possible to use animateDpAsState so there is no glitch when size changes

[okushnikov]

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