expandable mat table: flickering/hiding rows on hover (at least in firefox)

[muellerdberlin]

Reproduction

https://stackblitz.com/angular/amjmberrroq?file=src%2Fapp%2Ftable-expandable-rows-example.ts

Steps to reproduce:

1. Open in Firefox or Firefox Developer Edition
2. Open/expand some rows, go back to a previous row, expand it
3. hover the next row (below detail view)

Expected Behavior

simple hover effect for every row

Actual Behavior

flickering / hidden row for some seconds (instead of hover effect)
I don't have this problem in Google Chrome, but in Firefox (and Firefox Developer Edition as well)

Environment

• Angular: 11.0.0+
• CDK/Material: 11.0.0+
• Browser(s): Firefox 86.0b5 (Developer Edition)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS Big Sur 11.1

[crisbeto]

I was able to reproduce it as well, but it's somewhat random which leads to be believe that it's some kind of weird browser rendering artifact.

[hubert-giraud]

We had the same problem with material version 16. Making the animation duration slightly different between expanded => collapsed and collapsed => expanded, solved the problem for us.

[mpumford]

Still there in material 17 but changing the duration of one of the expand/collapse annimations worked as a workround.

[crisbeto]

I can't reproduce it anymore and there hasn't been activity in a while so I'm assuming it's not an issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}