[material-ui][InputBase] Auto-fill keyframes may cause unwanted animations

[josepharhar]

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-tsmx9v?file=src%2Fstyle.css

Screen.Recording.2024-09-21.at.19.02.56.mov

Steps:

1. Load the page in Chrome 117 or newer

Current behavior 😯

The very first frame has the text input box rendered extra tall. The next frame has it at the normal size.
This is happening because the mui-auto-fill-cancel keyframes rule starts an animation.

Expected behavior 🤔

No animation should be started and the first frame should be the same as the final state.

Context 🔦

Hello! I recently implemented a feature in chrome which makes the display property animatable: https://chromestatus.com/feature/5154958272364544

Before I made this change, @keyframes rules with display in them did nothing. The mui-auto-fill keyframes rules in particular would have not started an animation because they didn't contain any animatable properties. Now that display is animatable, it is creating an animation which is only lasting for a single frame.

This was added here: #28070

Based on the issue which that PR fixed, it sounds like there has to be some styles inside the keyframes which don't actually start an animation. I recommend using a property which is pretty much guaranteed to never be upgraded to become animatable, such as the animation-name property. So perhaps replacing display:block with animation-name:hello-world would fix it?

Your environment 🌎

npx @mui/envinfo

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

[josepharhar]

I discovered this from a chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1492888

[josepharhar]

Here is the keyframes rule:

material-ui/packages/mui-material/src/InputBase/InputBase.js

Lines 234 to 235 in e00fa56

	'@keyframes mui-auto-fill': { from: { display: 'block' } },
	'@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },

[josepharhar]

And here is a list of non-animatable properties in chrome (except display and content-visibility): https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/animation/css/css_animations.cc;l=3111-3160;drc=977dc02c431b4979e34c7792bc3d646f649dacb4

The ones starting with animation are probably the safest to rely on in the future, since we can't let an animation fundamentally change itself in the middle of an animation.

[mj12albert]

@josepharhar Thanks for the detailed report ✨

The very first frame has the text input box rendered extra tall. The next frame has it at the normal size.

BTW this was quite hard to see 😅

[oliviertassinari]

It's a lot more visible on https://mui.com/material-ui/getting-started/templates/dashboard/, really annoying actually

Screen.Recording.2024-09-21.at.19.06.00.mov

Related to #41469. The initial work #14427. A recent follow-up: #28070.