Accordion's bottom outline disappears when expanded (only in safari)

Steps to reproduce

Link to live example: https://stackblitz.com/~/github.com/vaughn18/mui-accordion-bug

Using the live example will be redundant as it requires you to use different browser. So you must clone this repo

Steps:

1. Clone the repo
2. install vite if not yet installed e.g. npm install -D vite
3. start the app with vite in terminal
4. Open the app in Safari (I am currently on version 17.5) it should be on localhost:5173
5. Expand Accordion 2

Current behavior

Bottom outline is gone

Expected behavior

Bottom outline is there (opened in chrome)

Context

I am a developer for a health software company and we happen to use React MUI for our App. It is part of our standards that we should comply to support Safari. We found this bug from testing and can confirm that it only happens on Safari, we haven't tested on any other versions aside from the one mentioned (17.5). We currently have a workaround to fix this issue which is to expand the height of the Grid container by hardcoding a specific value but it is not quite up to par with our coding conventions as we try to not to hardcode values on low level components.

Your environment

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.7.0 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.100
    Edge: 127.0.2651.98
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.13.0 => 11.13.0 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: ^5.16.7 => 5.16.7 
    @mui/material: ^5.16.7 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.7 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1