<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">Navigate the Material-UI 1.0 docs using Internet Explorer 11 (useful to check component demos, etc).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">An error is thrown in the console and unable to click on the drawer navigation.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/177476/36067232-4794a9dc-0e87-11e8-84b0-328a1cff391b.png"><img src="https://user-images.githubusercontent.com/177476/36067232-4794a9dc-0e87-11e8-84b0-328a1cff391b.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Go to <a href="https://www.material-ui.com" rel="nofollow">https://www.material-ui.com</a> using Internet Explorer 11 and attempt to click on a link on the drawer.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">Check component compatibility with Internet Explorer 11.</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.33</td>
</tr>
<tr>
<td>browser</td>
<td>Internet Explorer 11</td>
</tr>
</tbody>
</table>
<p dir="auto"><code class="notranslate">theme.transitions.create(CSS)</code> should always take canonical CSS to work. For example, <a href="https://github.com/callemall/material-ui/blob/40f063d022377a7d100903167e9d12685bedf67a/src/Input/Input.js#L149">this input underline hover</a> is not working currently, because it is given <code class="notranslate">backgroundColor</code> instead of <code class="notranslate">background-color</code>.</p>
<p dir="auto">If this is a simple mistake, I can go through it and see if other places are using JS-style CSS, and shift them to regular CSS?</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/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="theme.transitions.create('backgroundColor')"><pre class="notranslate"><code class="notranslate">theme.transitions.create('backgroundColor')
</code></pre></div>
<p dir="auto">Should properly add a transition of <code class="notranslate">background-color</code>.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It does not because it isn't proper CSS.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">None of the underline hover transitions are working in the docs</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>next</td>
</tr>
</tbody>
</table>