[TextField] flickering when move focus between text field on mobile browser

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

i created a form for my project and it's working perfectly on desktop but when I switch to my android, flicker happened. I thought my conditional styling somehow affects this behavior then i created new clean project to test it without any conditional styling, and flickering still happened on two phones that I've tested.

Android Chrome Version: 103.0.5060.70

here is the screen record:

Expected behavior 🤔

no flicker

Steps to reproduce 🕹

Steps:

1. click the text input until the on screen keyboard shown
2. scroll to the bottom of page and make sure text input still on screen
3. click other text input to see the flickering

Context 🔦

No response

Your environment 🌎

 System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.44)
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3
    @emotion/styled: ^11.9.3 => 11.9.3
    @mui/base:  5.0.0-alpha.88
    @mui/material: ^5.8.7 => 5.8.7
    @mui/private-theming:  5.8.6
    @mui/styled-engine:  5.8.7
    @mui/system:  5.8.7
    @mui/types:  7.1.4
    @mui/utils:  5.8.6
    @types/react:  18.0.15
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  4.7.4

Start at the TextField entry point and reproduce the focus transition on Android Chrome using the listed steps, including scrolling with the keyboard visible. Compare the behavior with desktop browsers and verify that moving focus between fields no longer flickers on the reported mobile setup.