Visual bug on outlined label in Safari

[simon-thuresson-md]

Steps to reproduce

Steps:

1. Open Safari
2. Go to codeSandbox with TextField variants
3. Change component Box to Stack
4. The label is now not rendered properly in Safari with visual bug

Current behavior

The label on an outlined component is not rendered as in Chrome or Firefox.

Expected behavior

To behave similar across platforms

Context

We are trying to use the outlined components inside a Stack, this unfortunately renders badly on Safari:

After a lot of debugging we found that there seems to be a rendering bug on MUI:s side with an outlined component inside a Stack on Safari.

The bug can be "fixed" by adding this css:

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

Why that solves it, I dont know.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Browser: Safari Variant: Outlined Label VisualBug

[mj12albert]

@simon-thuresson-md Do you have other CSS customizations? Testing in Safari 18.6 the transition is little bit off but when it's settled it's still OK unlike your screenshot

https://github.com/user-attachments/assets/97158dd0-6c86-4652-b324-7e8146ec9b3f

https://codesandbox.io/p/sandbox/frosty-burnell-3mgqt6

[simon-thuresson-md]

Right! I feel like that is a symptom of the same problem though, there is definitely a visual bug no? So my feeling is that would still be an issue no?

Anyways, I managed to refine the example to this:

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  boxShadow: 24,
  p: 4,
};

export default function BasicTextFields() {
  return (
    <Modal open={true}>
      <Box sx={style}>
        <Stack>
          <TextField label="Standard" variant="outlined" />
        </Stack>
      </Box>
    </Modal>
  );
}

If you past that in the codesandbox, you can reproduce my second picture from the description where the outline goes missing. Though, if you remove the translate it isnt that bad, more like your video. I cant tell what that means though, or if it should be related? I mean it works on chrome and firefox without issuse?

I have not yet reproduced the example in the first picture as easy, cant really copy our entire codebase :)

[simon-thuresson-md]

I think it is worth noting that this is NOT only on TextField component, I have seen the same bug on Select as well as DatePicker. Using the example and change to Select will reproduce

[jknight12882]

+1 also able to reproduce this issue

[Jayesh-11]

Hi @simon-thuresson-md this might help I believe the issue is using Modal with transform,

instead this workaround for webkit

 '-webkit-transform': 'translate2d(-50%, -50%)'

or

 '-webkit-transform' : 'translate3d(-50%, -50%, 0%)'

Here the code for reference

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { Modal, Stack } from '@mui/material';

const style = {
  position: 'absolute',
  transform: 'translate(-50%, -50%)',
  top: "50%",
  left: "50%",
  // left: "40%",
  // '-webkit-transform': 'translate2d(-50%, -50%)',
  // '-webkit-transform' : 'translate3d(-50%, -50%, 0%)',
  width: 400,
  bgcolor: 'background.paper',
  boxShadow: 24,
  p: 4,
};

export default function BasicTextFields() {
  return (
    <Modal open={true} onClose={() => {}}>
      <Box sx={style}>
        <Stack>
          <TextField label="Standard" variant="outlined" />
        </Stack>
      </Box>
    </Modal>
  );
}

Reference

https://github.com/user-attachments/assets/6b8fa8cd-f96d-4cd2-879a-983721e56bab

[simon-thuresson-md]

"I believe the issue is using Modal with transform,"

I am not sure I follow you @Jayesh-11 . The main issue, as I see it, is using an outlined component inside a Stack component causes it to render the label badly. The use of a Modal was only to demonstrate the issue more clearly. If you would remove the use of Modal in your example, the component would still render badly (though not as bad). So I would say your "solution" is only a fix to the symptom, not the problem itself. As I mentioned in the description. the use of:

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

Solves the problem, but I would say it only solves the symptom.

But maybe I miss understood you? :)

[Jayesh-11]

@simon-thuresson-md maybe I am missing something but just using stack with outlined textfield seems to be working fine hence ruling out isolated Stack component maybe -> correct me if am missing something here https://stackblitz.com/edit/vitejs-vite-jykxmjbe?file=src%2FApp.tsx

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { Stack } from '@mui/material';

export default function BasicTextFields() {
  return (
    <Stack>
      <TextField label="Standard" variant="outlined" />
    </Stack>
  );
}

---

isolated with box also works fine - https://stackblitz.com/edit/vitejs-vite-45pfwrxj?file=src%2FApp.tsx

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { Box, Stack } from '@mui/material';

export default function BasicTextFields() {
  return (
    <Box>
      <Stack>
        <TextField label="Standard" variant="outlined" />
      </Stack>
    </Box>
  );
}

---

isolated modal + stack + box - seems to be working fine

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Modal from '@mui/material/Modal';

export default function BasicTextFields() {
  return (
    <Modal open={true} onClose={() => {}}>
      <Stack>
        <TextField
          label="Standard"
          variant="outlined"
          sx={{ border: '5px solid transparent' }}
        />
      </Stack>
    </Modal>
  );
}

---

The issue seems to be visible when transform is involved for me at atleast as mentioned here the issue is the one where the fieldset is completely empty so targetting that if we remove tranform, I wasn't able to reproduce the original mentioned issue without transform

[simon-thuresson-md]

@Jayesh-11 Hmm, are you checking on Safari? If you only have a Stack with an outlined textfield there is a visual bug. Not as apparent though as if you also have it inside the modal I provided as well.

When I see the bug on safari with stack and outlined textfield, it goes away when i use a box.

This is using your stackblitz on Safari:

https://github.com/user-attachments/assets/ca1f1d8f-43bb-4595-8145-a93b3bfa7596

It is also there if i have:

export default function BasicTextFields() {
  return (
    <Box>
      <Stack>
        <TextField label="Standard" variant="outlined" />
      </Stack>
    </Box>
  );
}

[Jayesh-11]

Thanks for quick response! yes that minor issue is visible in safari but because of this comment I was not addressing that issue

---

was more working towards fixing this issue as shown here which is highlighted in safari with the code you shared here

[Mustajabgohar]

I am facing similar issue on MUI version: v5.1.0, and it is also reproducible on MUI latest version too. Cause: I find out issue is happening when we add placeholder to TextField.

Steps to reproduce:

1. Add Textfield with placeholder="some text", adding variant="outlined" is optional.

@simon-thuresson-md suggested solution here works correctly.

Earlier, I also had applied a quick fix the issue, sharing the fix in case it might help @muibot to dive deep down the issue:

.MuiOutlinedInput-notchedOutline legend {
    transition: none;
}

<TextField
  id="outlined-basic"
  label="I have an issue"
  variant="outlined"
  placeholder="I cause issue"
  sx={{
    '& legend': {
      // Uncomment one below property to apply fix
      // visibility: 'visible', 
      // transition: 'none'
    }
  }} 
/>

[patriciam97]

I have the same issue with the outlined Textfield. I noticed that for me it is only happening when the Textfield is part of a dialog. I use @mui/material": "^7.3.4" .

It is indeed fixed when adding the suggestion by @simon-thuresson-md . Thanks!