<p dir="auto">As the title says, when I trigger my popover from a floating action button, it causes a FOUC in the top left corner of my app.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/115199/31040955-7118478e-a553-11e7-8448-7b9f01431416.gif"><img src="https://user-images.githubusercontent.com/115199/31040955-7118478e-a553-11e7-8448-7b9f01431416.gif" alt="react material ui fouc" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">You can see the code for my setup here: <a href="https://github.com/atrauzzi/gerty/blob/wip/src/App/Gerty/Component/App.tsx#L82-L130">https://github.com/atrauzzi/gerty/blob/wip/src/App/Gerty/Component/App.tsx#L82-L130</a></p>
<p dir="auto">Also worth noting that the open animation doesn't get performed, but the close does.</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">Popover component renders children before applying position styling. This results in a 'flash' of the popover in the top left corner (<code class="notranslate">x: 0, y:0</code>) before positioning correctly.  This is caused by the <code class="notranslate">setPlacement</code> function being wrapped in <code class="notranslate">setTimeout</code>.  Removing the setTimeout wrapper resolves the issue.  The timeout was added for this issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="247953341" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7663" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/7663/hovercard" href="https://github.com/mui/material-ui/pull/7663">#7663</a>.</p>
<p dir="auto">Initial render 'flash':<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/11380129/30035632-15f80926-9161-11e7-953a-202efe2acbd7.png"><img src="https://user-images.githubusercontent.com/11380129/30035632-15f80926-9161-11e7-953a-202efe2acbd7.png" width="300" style="max-width: 100%;"></a></p>
<p dir="auto">Split second later, correctly positioned:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/11380129/30035649-39ddcb64-9161-11e7-896b-0cd2dac66368.png"><img src="https://user-images.githubusercontent.com/11380129/30035649-39ddcb64-9161-11e7-896b-0cd2dac66368.png" width="300" style="max-width: 100%;"></a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.19.0</li>
<li>React: 15.5</li>
<li>Browser: Chrome 60.0.3112.90</li>
</ul>