Material-ui: [Drawer] doesn't close in tableau public

[ChrisJamesC]

Problem description

The drawer component doesn't hide in the Tableau Public application. Even drawers which have a "closed" state on initialisation are always open.

I am well aware that it is a very niche issue and that it's most certainly a tableau issue, but I prefer to document it here too. Feel free to close this issue if it's not suitable.

I also asked a question on the tableau forum: https://community.tableau.com/thread/218454

Link to minimally-working code that reproduces the issue

• First you need to install tableau public: https://public.tableau.com/s/
• Then open tableau public, click on "Web Data Connector" in the side bar
• Open the link http://www.material-ui.com/#/components/drawer in the navigation of the in-app browser.

• Notice that all left side drawers are open instead of just having the side bar.

  Versions

• Material-UI: 0.16.0

• React: 15.3.2
• Browser: Tableau Public 10.0.1 (on macOS Sierra)

[lucasbento]

Hey @ChrisJamesC, thanks for opening an issue.

I'm not sure that we can help with it, that sounds more like an issue on their side.

[ChrisJamesC]

Hi @lucasbento, I don't know either but I figured that documenting the issue wouldn't hurt. I'll do some research on my side and provide a fix if I can find one.

[ChrisJamesC]

The issue comes from the fact that their browser doesn't seem to support the transform css property. Since it is that property that's used by material-ui to hide the drawer (for the transition when opening/closing the drawer), it doesn't work.

Here is the quick fix I used in my drawer component (It breaks the animation though):

var opened; // set to true/false
return <Drawer style={opened?{}:{display:"none"}} open={opened}>

Setting the component's display property to none does the trick.

[ChrisJamesC]

This issue is due to the fact that Tableau Public seems to use a version of Webkit similar to what you get in Safari 8. Hence the lack of support for some features.
I completely understand that these features are not supported in material-ui, so I'll find a way around the issues I face.

[lucasbento]

I'm glad that you found a workaround @ChrisJamesC! :)

[ChrisJamesC]

Thanks @lucasbento
To add more details for the next person hitting this issue, it happens with QT WebKit from QT 5.4.

[mbrookes]

Closing as an unsupported browser.

[jaszhix]

I am running into this issue on iPhone 6/iOS 8.1.3 with Safari 600.1.4. I am using BrowserStack to test my app, and on this version the Drawer stays open regardless of the state change.

Using Material UI 0.17.0 / React 15.4.2

[aaron-price]

The display: none workaround by @ChrisJamesC solved it for me!

Like @jaszhix , I'm using browserstack and finding the issue coming up with all older iphones... but they aren't that old. iPhone 6 is only 2014. It's not a matter of tap events.
If you have <Drawer open={false}> it'll still be open in those devices.