[text field] Visual bug on outlined label in Safari

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

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

Search keywords: Browser: Safari Variant: Outlined Label VisualBug