[Card] The Highlighting of card component on back gesture on Android 13 device

[vasimpathan22]

Steps to reproduce

Steps:

1. Open this link to live example: (https://github.com/vasimpathan22/react-mui-cap-poc)
2. Refer Readme file of code to reproduce the issue
3. use Android 13 emulator or physical device

mui-card-issue.mp4

to produce the issue

Current behavior

The card is getting highlighted with the black color gradually and its also retaining that color even after opening the app

Expected behavior

the card should not be get highlighted

Context

So basically i am using the material ui ,react and capacitor to develop the native application in which i have used the card components of mui where i have seen that at some stage while performing the back gesture on this card the card is getting highlighted and also it is retaining the state of the card, This issue only arising on Android 13 devices specially. The respective video is attached.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: CardActionArea,Mui

[mnajdova]

I don't think this is specific to the card component, seem like some state persists on the app level when it shouldn't. Where does the grey background come from?

[vasimpathan22]

On clicking the card there is ripple effect which is of light gray color but dont know how the effect is activating even though i am not clicking the card component while going back with the help of gesture

[DiegoAndai]

Hey @vasimpathan22, thanks for the report.

If this isn't reproducible with Android 14 or 15, it looks to me like there was a bug in Android 13 that was fixed.

Have you tried using disableRipple={true} on CardActionArea?

[vasimpathan22]

Using disableRipple={true} it is working but the Ripple effect should be only shown when the card is clicked, also that effect is accumulating on card while using gesture.
And after using disable ripple how can i add that effect on the card is there any alternative way

[DiegoAndai]

And after using disable ripple how can i add that effect on the card is there any alternative way

Sadly not, the workaround I proposed is removing the ripple, which I though was going to remove the accumulating grid gray overlay. It didn't?

As I mentioned, this looks like a bug in Android 13's side. May I ask you to search for any similar issues reported on their repo? I don't think there's anything we can do on our side.

[vasimpathan22]

After using disable ripple there is no any gray overlay accumulating I will check if any issue had been raised on their repo

[DiegoAndai]

I'm tentatively closing as the bug has been fixed in the latest Android versions, and the workaround for Android 13 is disabling the ripple. @vasimpathan22, feel free to reopen if you have new evidence pointing to an issue on the Material UI side.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@vasimpathan22 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.