[TextField] Autofill font size changes on page interaction

[cheesestringer]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When a text field is prefilled the font size changes when the user interacts with the page.

Autofill on page load

Autofill on page interaction

Gif

Expected behavior 🤔

The font size should be consistent so the user doesn't see a flicker of resizing when interacting with the page.

Steps to reproduce 🕹

Steps:

1. Enable autofill on Chrome or Edge
2. Have save details like username / password
3. Load a page that prefills saved details

Context 🔦

Consistent look and feel for a prefilled text field.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 101.0.4951.54
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
  npmPackages:
    @emotion/react: ^11.8.2 => 11.8.2
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.74
    @mui/icons-material: ^5.5.1 => 5.5.1
    @mui/material: ^5.5.3 => 5.5.3
    @mui/private-theming:  5.5.3
    @mui/styled-engine:  5.5.2
    @mui/system:  5.5.3
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @mui/x-data-grid: ^5.10.0 => 5.10.0
    @mui/x-date-pickers: ^5.0.0-alpha.2 => 5.0.0-alpha.2
    @types/react: ^17.0.43 => 17.0.43
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.6.3 => 4.6.3

[CalvinJamesHeath]

Still no fix?
Doesn't work anymore: input:-webkit-autofill::first-line { font-size: 16px; }

[sorcara-max]

Any workaround? I've tried everything about autofill...

[StreakingMan]

Same problem. Is it the browser's behavior or something else?