Display glitch when using multiline in TextField

[googol7]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/material-ui/react-text-field/#multiline with iOS simulator Version 16.0 (1038)
2. Click into the first example, so that the TextField get's the focus
3. Click outside so that the TextField looses the focus

Current behavior

With focus

The label "Multiline" is striken through.

Without focus

There's a gap now.

Expected behavior

With focus

Without focus

Context

No response

Your environment

MUI v.6.3.1
iOS simulator Version 16.0 (1038) with Mobile Safari 18

Search keywords: TextField, multiline

[mnajdova]

I can reproduce this on latest Safari on mobile. We'll look into it to see if we can quickly fix it.

[mnajdova]

The behavior comes from the transitions, but I am not sure why it is happening only on the multiline demo. What's even more weird is that if I just render this demo, e.g. export it via sandbox, the issue is not happening. It has to be a browser bug in some way. Anyway, I would recommend for fixing ti locally to disable the legen'd transition, using something like this:

"& legend": {
  transition: "unset",
},

Either on a theme level, or directly on the TextField component, e.g.: https://codesandbox.io/p/sandbox/little-glitter-w3mxsd?file=%2Fsrc%2FDemo.tsx%3A21%2C9 You can try this demo on the docs to validate that the first textfield works as expected, while the other don't (on the Sandbox all of them work as expected on my phone 🤷‍♀

[DqPatrick]

I can confirm that the quick-fix from @mnajdova is resolving this issue. Weirdly, I cannot make out a visual difference in setting the transition to unset vs. not specifying this attribute for e.g. a "normal" TextField element.

[googol7]

Reported the problem to WebKit: https://bugs.webkit.org/show_bug.cgi?id=304070

See also the animated gif:

[hrishikesh2810]

Hi maintainers 👋
I’d like to work on this issue.
Please let me know if it’s already assigned to someone.
Thanks!