<p dir="auto">References <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="252423991" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7888" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/7888/hovercard" href="https://github.com/mui/material-ui/issues/7888">#7888</a></p>

<p dir="auto">I have a below snippet:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Fade in={this.state.scrollVisible}&gt;
  &lt;ScrollTopButton /&gt;
&lt;/Fade&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Fade</span> <span class="pl-c1">in</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">scrollVisible</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">ScrollTopButton</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Fade</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Initially on load <code class="notranslate">this.state.scrollVisible</code> is <code class="notranslate">false</code>, but <code class="notranslate">ScrollTopButton</code> is visible anyway. After showing/hiding, it starts to work correctly, only initial load with <code class="notranslate">in={false}</code> is broken.</p>
<p dir="auto">Adding <code class="notranslate">mountOnEnter</code> prop helps, but shouldn't be required.</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">Child of <code class="notranslate">Fade</code> should never be visible when <code class="notranslate">in={false}</code> on mount</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Use <code class="notranslate">Fade</code> component with <code class="notranslate">in={false}</code> - child will be rendered and visible while it shouldn't.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Open <a href="https://codesandbox.io/s/9ov57l1pv4" rel="nofollow">https://codesandbox.io/s/9ov57l1pv4</a></li>
<li>You can see that <code class="notranslate">Shouldnt be visible on Load</code> button is visible on load while it shouldn't</li>
<li>Click <code class="notranslate">SHOW</code> button, <code class="notranslate">Shouldnt be visible on Load</code> will still be there, another button <code class="notranslate">mountOnEnter helps but shouldnt be necessery</code> will show.</li>
<li>From now on, you can toggle hide/show, everything works fine, only point 1 is problematic.</li>
</ol>
<h2 dir="auto">Context</h2>

<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>1.0.0-beta.31</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
</tbody>
</table>
<ul dir="auto">
<li>[y] 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>
<p dir="auto">How do i make sure the bottom navigation is always, well, at the bottom?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  position: absolute;
  bottom: 0;
  width: 100%;"><pre class="notranslate"><code class="notranslate">  position: absolute;
  bottom: 0;
  width: 100%;
</code></pre></div>
<p dir="auto">This works but when keyboard is open, it will push the view up.</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>0.19.2</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome V60</td>
</tr>
</tbody>
</table>