Material-ui: [Drawer] Opening undocked LeftNav zooms page in iOS Safari

[ph3b]

So I've encountered a weird bug where the LeftNav will sometimes zoom the page and also enlarge the menu size. I've included a demo below.

The app views are structured using react-router. The structure looks like this:

<Provider store={AppStore}>
      <Router>
        <Route path="/login" component={Login}/>
        <Route path="/" onEnter={checkIfLoggedIn} component={ControlPanel}>
          <IndexRoute component={CustomersView}/>
          <Route path="customers" component={CustomersView} />
          <Route path="customers/:id" component={CustomerProfileView} />
          <Route path="sessions/" component={SessionView} />
        </Route>
      </Router>
    </Provider>

The LeftNav component is rendered in the ControlPanel component which acts as a main template for an App Bar and LeftNav component. Children (CustomersView, CustomersProfileView, SessionView) are rendered within this template. The LeftNav works correctly in the "customers" path, but incorrectly in the other paths (sessions and customer/:id).

All the children components are structured the same, render() returns a div-container with children elements (some material-ui components). I'm using Radium to autoprefix my styles.

The bug is only visible on iOS Safari and runs fine in Desktop Safari and Chrome.

UPDATE:

After diffing the generated HTML from React there is a weird span-element that gets generated on the zoomed version:

<span style="height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;" data-reactid=".0.$=11.1.1:$=12.0.0.0"></span>

I am however unable to find out why.

[yann86]

I encounter the same issue did you find a solution?

[ajs139]

This may fix the issue for now:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

[jeffreywescott]

I am also seeing this, but only when docked={false}. If I change to docked={true}, the problem goes away, but then I don't get the nice overlay.

Maybe related to this: https://stackoverflow.com/questions/34893182/ios-safari-not-respecting-z-index

The maxium-scale=1 hack above does seem to fix it.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.