Field input labels disappear (iOS only)

[cwood-panopto]

Steps to reproduce

Steps: (only on iOS Chrome or Safari, EDIT: and Mac w/ Safari)

1. Open this link to live example: --Redacted-- (EDIT: new stackblitz repro: https://stackblitz.com/edit/stackblitz-starters-knh9upbc?file=app%2Fpage.tsx )
2. Tap to expand the second card
3. Tap in and out of any of the text fields

Current behavior

Only on iOS and Mac, labels and part of the border of text fields disappear when focused or unfocused or when the card content is expanded or collapsed.

https://github.com/user-attachments/assets/877728e8-0d06-4606-974e-859dd0e2962b
https://github.com/user-attachments/assets/8116c221-3659-4e4d-97f2-a2b7b1a592b6

Expected behavior

Field labels would animate properly when focused unfocused or card is expanded collapsed and field borders would fill again completely.

Context

I made a simple test page with none of the other theme or css involved and I still see the issue. I cannot repro on mui.com however.

Your environment

npx @mui/envinfo

Device: iOS 26.2.1 iPad (and iPhone) Safari and Chrome 146.0.7680.38

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 24.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 145.0.7632.117
    Edge: Chromium (141.0.3537.85)
  npmPackages:
    @emotion/react:  11.14.0
    @emotion/styled:  11.14.1
    @mui/core-downloads-tracker:  7.3.8
    @mui/icons-material:  7.3.8
    @mui/material:  7.3.8
    @mui/private-theming:  7.3.8
    @mui/styled-engine:  7.3.8
    @mui/system:  7.3.8
    @mui/types:  7.4.11
    @mui/utils:  7.3.8
    @mui/x-charts:  8.27.0
    @mui/x-charts-vendor:  8.26.0
    @mui/x-internal-gestures:  0.4.0
    @mui/x-internals:  8.26.0
    @types/react:  19.2.14
    react:  19.2.4
    react-dom:  19.2.4
    typescript: ^5.9.3 => 5.9.3

Search keywords: field input label animation shrink border ios iphone

[linear]

MAT-1782

[mj12albert]

@cwood-panopto Can you try the workarounds in #46891 to see if it's related?

[cwood-panopto]

If you are referring to this workaround from the mentioned issue, no it's still not really working:

 @supports (-webkit-appearance: none) {
  .MuiOutlinedInput-notchedOutline legend, {
    visibility: visible !important;
  }
}

[mj12albert]

I made a simple test page with none of the other theme or css involved and I still see the issue.

Could you share this in stackblitz? @cwood-panopto

[cwood-panopto]

ScreenRecording_03-09-2026.01-07-59_1.MP4

I couldn't figure out how to get stackblitz to work it doesn't seem to support next.js latest with turbopack. I tried switching to webpack and stackblitz just stopped loading for me.

I did, however, create a repository with some basic repro. I only repro it on iOS (either chrome or safari), only the second card "Test 2" seems to repro with this simplified code. I also only repro it when in landscape (but it was reproducing on a friend's iPhone in portrait on my website, I don't have an iPhone to verify this simplified repro).
Repro:

1. pull the repo: https://github.com/cwood-panopto/mui-issue-47906
2. in terminal: npm install && npm run dev
3. open http://ip:3000 on your iOS device (the ip that next.js returns in terminal)
4. tap the expand and unexpand symbol on the bottom of the second card as many times as needed; I just need to tap it once (note the labels disappear on fields and the hint text disappears in others)

[cwood-panopto]

https://stackblitz.com/edit/stackblitz-starters-knh9upbc?file=app%2Fpage.tsx

I was able to get it working with an older version of next and react, but with latest MUI above. I couldn't figure out how to open it on an iOS device, but I got hold of a Mac and was able to repro it there (on Safari). See video:
https://github.com/user-attachments/assets/093a3891-f248-4b4e-8228-6ef1f223101b

[cwood-panopto]

@mj12albert any ideas?