Field input labels disappear (iOS only)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Steps: (only on iOS Chrome or Safari, EDIT: and Mac w/ Safari)
- Open this link to live example: --Redacted-- (EDIT: new stackblitz repro: https://stackblitz.com/edit/stackblitz-starters-knh9upbc?file=app%2Fpage.tsx )
- Tap to expand the second card
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.