[AppBar] Safari does not shift when persistent Drawer is re-opened

While working on mui-app-container, I ran into an issue with AppBar that appears to only be present on Safari (it does not exhibit on Chrome or IE 11 at least) - when toggling a persistent drawer closed and then reopen it, the AppBar does not account for the width of the drawer.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

An AppBar should offset to the right by the amount of the drawer after reopening.

Current Behavior

After closing and reopening a persistent Drawer, the left side of AppBar is now under the Drawer instead of being shifted to the right. This is present on the v1 docs as of today (v1.0.0-beta.28). Notice the “Drawers” title not being present.

Safari (problem)

Chrome (no problem)

You can also see this problem when toggling the persistent drawer example (notice “Persistent drawer” no longer being visible when the drawer is open)

You can also see this problem reproduced in mui-app-container’s storybook with the story source here

Steps to Reproduce (for bugs)

1. Go to persistent drawer example
2. Click on menu icon to toggle drawer
3. Notice “Persistent drawer” title is hidden under drawer instead of being shifted]

Context

I have been working on creating a <AppContainer> component to help orchestrate <Drawer>, <AppBar>, and content components and came across this issue.

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.28
React	16.1.1
browser	Safari 11.0.2 (desktop and iOS)

[oliviertassinari]

@techniq Thanks for digging into it! The WebKit bug report looks very close to the issue we are experiencing.

[techniq]

@oliviertassinari OK. I might implement a workaround in my mui-app-container to remove the transition prop if on Safari <11.1 as this seems to be the best workaround I’ve found (now will just need a way to detect Safari <11.1 especially since they are going to stop updating their user-agent last I heard).