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

Screen.Recording.2025-09-09.at.10.34.38.AM.mov

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

output.mov