[TextField] Screen flickering when typing in Chrome mobile

[vicasas]

Steps to reproduce

Link to live example: https://mui.com/material-ui/react-text-field/#form-props

Steps:

1. Go to the URL of the TextField documentation using Chrome mobile in iOS.
2. In the first input of the second demo, "Form Props," start typing.
3. You will notice that the top part of the keyboard begins to flicker.

Current behavior

As soon as I start typing in the input field on Chrome mobile, the screen starts flickering, specifically the top bar of the keyboard.

Using iOS 17.

RPReplay_Final1726660053.mp4

Expected behavior

The expected behavior is that typing in the input field should not cause the screen to flicker.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: iOS 17.6.1
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.46
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.1.0 
    @mui/icons-material: ^6.1.0 => 6.1.0 
    @mui/lab: ^6.0.0-beta.9 => 6.0.0-beta.9 
    @mui/material: ^6.1.0 => 6.1.0 
    @mui/material-nextjs: ^6.1.0 => 6.1.0 
    @mui/private-theming:  6.1.0 
    @mui/styled-engine:  6.1.0 
    @mui/system:  6.1.0 
    @mui/types:  7.2.16 
    @mui/utils: ^6.1.0 => 6.1.0 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.5.2 => 5.5.2 

Search keywords: TextField, Flickering, Typing