<p dir="auto">Since <code class="notranslate">Modernizr</code> only inserts the relevant browser prefix on the client render, there's a mismatch with the unprefixed server side render. As alluded to in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="71598143" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/591" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/591/hovercard" href="https://github.com/mui/material-ui/pull/591">#591</a> , this causes the following warning in react:</p>
<blockquote>
<p dir="auto">Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server...</p>
</blockquote>
<p dir="auto">I don't see any easy fixes for this, and it's quite a biggie, which is saddening. Obviously getting this whole module to move away from inline styles is a no-go.</p>
<p dir="auto">Pure speculation: maybe it's possible to patch the way react handles styles, so that when a component is supplied with <code class="notranslate">style={{'transition': 'all 1s'}}</code>, it's prefixed at the same time it's rendered to HTML, so it becomes:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" style=&quot;-webkit-transition: all 1s; transition: all 1s;&quot; "><pre class="notranslate"><code class="notranslate"> style="-webkit-transition: all 1s; transition: all 1s;" 
</code></pre></div>
<p dir="auto">instead of simply</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="style=&quot;transition: all 1s;&quot;"><pre class="notranslate"><code class="notranslate">style="transition: all 1s;"
</code></pre></div>
<p dir="auto">I have a React app, that runs on the server and in the clients browser.</p>
<p dir="auto">When I upgrade to <code class="notranslate">v0.8.0</code>, React gives me the "Expected html differs from the given markup" warning, because there are differences in the inline style definitions. For example:</p>
<p dir="auto">Server renders:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="style=&quot;...; user-select: none;..&quot;"><pre class="notranslate">style="...; user-select: none;.."</pre></div>
<p dir="auto">But the client (Chrome in this case) renders</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="style=&quot;...; -webkit-user-select: none;..&quot;"><pre class="notranslate">style="...; -webkit-user-select: none;.."</pre></div>
<p dir="auto">While it is nice to not have to worry about vendor prefixes, the correct handling of them creates those differences. Does anyone have an idea on how to fix (or workaround) this? I dont want to send the client, perfectly good markup, and then let React rebuild half of it, because of that.</p>
<p dir="auto">Maybe include all prefixes necessary? Might be tricky as well..</p>
<p dir="auto">Or do I have to exclude all css that needs to be prefixed back into style sheets?</p>