I have markup like so:
<nav>
<ul>
<li><a href="/">
<span style="color: orangered; background: -webkit-linear-gradient(orangered, darkorange); -webkit-background-clip: text;-webkit-text-fill-color: transparent;; font-weight:bold;">The</span>
<Icon>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 122.88 102.72"
style="enable-background:new 0 0 122.88 102.72; color: orangered; background: -webkit-linear-gradient(orangered, darkorange);
-webkit-background-clip: text;-webkit-text-fill-color: transparent;; font-weight:bold;" xml:space="preserve">
<g><path class="st0" d="M65.61,20.91v72.74h35.63c0.38,0,0.68,0.31,0.68,0.69v7.7c0,0.38-0.31,0.69-0.68,0.69H22.84 c-0.38,0-0.69-0.31-0.69-0.69v-7.7c0-0.38,0.31-0.69,0.69-0.69h35.63l0-72.71c-3.1-1.08-5.56-3.53-6.64-6.63H29.3v3.43 c0,0.38-0.31,0.68-0.68,0.68h-5.78c-0.38,0-0.69-0.31-0.69-0.68v-3.43h-5.73c-0.44,0-0.8-0.31-0.8-0.68V7.84 c0-0.38,0.36-0.69,0.8-0.69h35.43C53.33,2.99,57.31,0,61.99,0c4.68,0,8.66,2.99,10.14,7.16h35.53c0.44,0,0.8,0.31,0.8,0.69v5.78 c0,0.38-0.36,0.68-0.8,0.68h-6.46v3.43c0,0.38-0.31,0.68-0.68,0.68h-5.78c-0.38,0-0.69-0.31-0.69-0.68v-3.43H72.16 C71.09,17.38,68.67,19.81,65.61,20.91L65.61,20.91z M99.66,22.3l22.91,40.48c0.2,0.35,0.29,0.73,0.28,1.1h0.02c0,0.05,0,0.1,0,0.15 c0,9.64-11.35,17.46-25.35,17.46c-13.85,0-25.1-7.65-25.34-17.15c-0.04-0.16-0.06-0.34-0.06-0.51c0-0.44,0.14-0.86,0.37-1.2 l23.43-40.43c0.59-1.02,1.89-1.37,2.91-0.78C99.2,21.65,99.48,21.95,99.66,22.3L99.66,22.3z M99.75,31.11v30.6h17.32L99.75,31.11 L99.75,31.11z M95.67,61.7V31.16L77.96,61.7H95.67L95.67,61.7z M27.54,22.3l22.91,40.48c0.2,0.35,0.29,0.73,0.28,1.1h0.02 c0,0.05,0,0.1,0,0.15c0,9.64-11.35,17.46-25.35,17.46c-13.85,0-25.1-7.65-25.34-17.15C0.02,64.19,0,64.02,0,63.84 c0-0.44,0.14-0.86,0.37-1.2L23.8,22.21c0.59-1.02,1.89-1.37,2.91-0.78C27.08,21.65,27.36,21.95,27.54,22.3L27.54,22.3z M27.63,31.11v30.6h17.32L27.63,31.11L27.63,31.11z M23.54,61.7V31.16L5.84,61.7H23.54L23.54,61.7z M61.99,6.07 c2.59,0,4.69,2.1,4.69,4.69c0,2.59-2.1,4.69-4.69,4.69c-2.59,0-4.69-2.1-4.69-4.69C57.3,8.17,59.4,6.07,61.99,6.07L61.99,6.07z"/></g></svg>
</Icon>
<span style="color: orangered; background: -webkit-linear-gradient(orangered, darkorange); -webkit-background-clip: text;-webkit-text-fill-color: transparent;; font-weight:bold;">Referendum</span>
</a>
</li>
</ul>
</nav>
In my nav.svelte component. This works fine in dev.
However, in production, there is often a strange duplication of many elements. This is not consistent, but common. It is worse on remote cloud deployment of the app, but also seen on local running of prod build.
Other elements are strangely reproduced, but this is an easy instance you can see. Notice the word "referendum: is displayed twice, but only in the markup once.
I have been troubleshooting, and it has something to do with the SVG elements. If they are removed from the app, the problem goes away.
The app is live here, you might need to reload a couple times to see it. http://35.223.159.8/
Here is minimal repro: https://github.com/MTyson/sapper-bug Just the starter template with a couple icons in it. It is running here: http://rfrndm.com/ Just reload a couple times and you'll see it.