<p dir="auto">Hi everyone.</p>
<p dir="auto">This issue is following <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="158110762" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6950" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/6950/hovercard" href="https://github.com/facebook/react/issues/6950">#6950</a><br>
The fix works on IE11. Unfortunately, it doesn't under Edge.</p>
<p dir="auto">It seems that Edge is implementing innerHTML property on SVG tag, but in an inefficient way. Using it appends SVG text in the DOM tree, as it can be seen using the inspector, but Edge doesn't render anything... Unless you modify the svg string in the inspector...</p>
<p dir="auto">See the <a href="http://codepen.io/lgra/pen/OXPgoQ" rel="nofollow">codepen</a> (updated to use React 15.3) under Edge to see that issue.</p>
<p dir="auto">Of course, if we enforce Edge to use the hack, it works. I don't know how to enforce it except browser sniffing (grr...).</p>
<p dir="auto">This appears to be a bug in React with the Microsoft Edge browser. This was previously a bug in older Internet Explorer browsers as well, but appears to have been fixed by <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="158850774" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6982" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/6982/hovercard" href="https://github.com/facebook/react/pull/6982">#6982</a> – unfortunately the fix did not resolve the issue in Edge.</p>
<p dir="auto">I modified the codepen from the original issue to use React 15.3.0, which includes the above-referenced pull request, and demonstrates the bug in Edge:<br>
<a href="http://codepen.io/anon/pen/QEYoLV" rel="nofollow">http://codepen.io/anon/pen/QEYoLV</a></p>
<p dir="auto">Here is the output of that Codepen in IE 11 – this is the expected behavior as <code class="notranslate">innerHTML</code> is not available in Internet Explorer, yet React 15.3 is still able to function:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/123403/17674467/41cad16e-62eb-11e6-9813-72ba8170d3c5.png"><img src="https://cloud.githubusercontent.com/assets/123403/17674467/41cad16e-62eb-11e6-9813-72ba8170d3c5.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">And here is the output of the same Codepen in Edge 38:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/123403/17674514/6fb10a3a-62eb-11e6-9c2b-6528be67e48c.png"><img src="https://cloud.githubusercontent.com/assets/123403/17674514/6fb10a3a-62eb-11e6-9c2b-6528be67e48c.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The problem seems to be that Edge has <code class="notranslate">innerHTML</code>, so it does not use the IE workaround code, yet Edge does not appear to be refreshing the DOM after updating – at least I can see the SVG contents added to the DOM using Inspect Element, but they are not visible in the browser.</p>