[material-ui][Card] Cards with a Button as a child element may not position the Button correctly when transitioning in Safari

[asaxeye]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/p/sandbox/sharp-wilbur-w2yh5z?file=%2Fsrc%2FApp.tsx%3A16%2C27

Steps:

1. Access the above link in safari
2. Click the EXPAND button on one of the cards

Current behavior 😯

When the height of the Card changes, the position of the card below it changes, but the Button in the card does not follow it until the transition is complete.
This causes the contents and buttons to overlap.

Expected behavior 🤔

Button should transition as well as Card transition.

Context 🔦

• This does not occur if the Card is not inside a scrollable element (removing the Box's sx props in App.tsx works fine).
• Collapse is used in this example, but Conditional Rendering reproduces it as well.
• It occurred only in safari and was not reproduced in Chrome.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 20.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.5.2
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.16 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/icons-material: ^5.14.9 => 5.14.9 
    @mui/material: ^5.14.10 => 5.14.10 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.14.10 
    @mui/system:  5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @types/react: ^18.2.22 => 18.2.22 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.2 => 5.2.2

[DiegoAndai]

Hey @asaxeye, thanks for the report! Sorry for the delay.

This seems to be a Safari bug: https://stackoverflow.com/questions/34726992/ios-safari-rendering-bug-when-transitioning-from-overflowhidden

Adding position: fixed and top: 0 to the Box component fixes it: https://codesandbox.io/p/devbox/39138-workaround-f3jtxd

Feel free to reopen if this doesn't fix it for you.