<h2 dir="auto">Problem Description</h2>

<p dir="auto">In the most recent alpha with the most recent release of <a href="https://github.com/necolas/normalize.css">normalize.css</a> (4.0.0), EnhancedButtons are styled like actual buttons.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3111765/13961599/dd80e7d8-f022-11e5-846a-81a1990850be.png"><img src="https://cloud.githubusercontent.com/assets/3111765/13961599/dd80e7d8-f022-11e5-846a-81a1990850be.png" alt="materialuinormalizeissue" style="max-width: 100%;"></a></p>
<p dir="auto">After doing some digging, the problem is with recent changes in both projects. In material-ui, commit <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mui/material-ui/commit/00b6ba1d655a1cb8d9f120bf43a07ff677f82334/hovercard" href="https://github.com/mui/material-ui/commit/00b6ba1d655a1cb8d9f120bf43a07ff677f82334"><tt>00b6ba1</tt></a> added passing the type attribute to the inner element, and in normalize.css <a href="https://github.com/necolas/normalize.css/commit/9a3b1b32f460cdac60d934aad59cf498bd515d6e">a recent commit</a> lowered the specificity of a rule giving any element with <code class="notranslate">[type=button]</code> <code class="notranslate">-webkit-appearance: button</code>. I've already opened <a href="https://github.com/necolas/normalize.css/issues/554" data-hovercard-type="issue" data-hovercard-url="/necolas/normalize.css/issues/554/hovercard">an issue in their project</a> but because type is not a valid attribute for span and because lowering the specificity is slightly more performant, they don't seem to keen on reverting those changes.</p>
<h2 dir="auto">Versions</h2>

<ul dir="auto">
<li>Material-UI: 0.15.0-alpha.2</li>
<li>React: 0.14.7</li>
<li>Browser: Google Chrome 49.0.2623.87 (64-bit)</li>
</ul>
<p dir="auto">While working on <a href="https://github.com/techniq/mui-app-container">mui-app-container</a>, I ran into an issue with <code class="notranslate">AppBar</code> 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 <code class="notranslate">AppBar</code> does not account for the width of the drawer.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">An <code class="notranslate">AppBar</code> should offset to the right by the amount of the drawer after reopening.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">After closing and reopening a persistent <code class="notranslate">Drawer</code>, the left side of <code class="notranslate">AppBar</code> is now under the Drawer instead of being shifted to the right.  This is present on the v1 <a href="https://material-ui-next.com" rel="nofollow">docs</a> as of today (v1.0.0-beta.28).  Notice the "Drawers" title not being present.</p>
<h2 dir="auto">Safari (problem)</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/177476/35002023-461f7b34-fab6-11e7-99e8-a25f247b72f6.gif"><img src="https://user-images.githubusercontent.com/177476/35002023-461f7b34-fab6-11e7-99e8-a25f247b72f6.gif" alt="safari_20180116" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Chrome (no problem)</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/177476/35002037-5628d318-fab6-11e7-8115-33c95f329d43.gif"><img src="https://user-images.githubusercontent.com/177476/35002037-5628d318-fab6-11e7-8115-33c95f329d43.gif" alt="chrome_20180116" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">You can also see this problem when toggling the <a href="https://material-ui-next.com/demos/drawers/#persistent-drawer" rel="nofollow">persistent drawer</a> example (notice "Persistent drawer" no longer being visible when the drawer is open)<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/177476/35002100-90296e38-fab6-11e7-879f-dbf97ca3983a.gif"><img src="https://user-images.githubusercontent.com/177476/35002100-90296e38-fab6-11e7-879f-dbf97ca3983a.gif" alt="safari2_20180116" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">You can also see this problem reproduced in mui-app-container's <a href="https://techniq.github.io/mui-app-container/" rel="nofollow">storybook</a> with the story source <a href="https://github.com/techniq/mui-app-container/blob/master/stories/examples.js">here</a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Go to <a href="https://material-ui-next.com/demos/drawers/#persistent-drawer" rel="nofollow">persistent drawer</a> example</li>
<li>Click on menu icon to toggle drawer</li>
<li>Notice "Persistent drawer" title is hidden under drawer instead of being shifted]</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I have been working on creating a <code class="notranslate">&lt;AppContainer&gt;</code> component to help orchestrate <code class="notranslate">&lt;Drawer&gt;</code>, <code class="notranslate">&lt;AppBar&gt;</code>, and content components and came across this issue.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.28</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>Safari 11.0.2 (desktop and iOS)</td>
</tr>
</tbody>
</table>