<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:<br>
(client) tyle="did-flip:true;-webkit-tap-highligh<br>
(server) tyle="did-flip:true;tap-highlight-color:</p>
<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>