Duplicated Elements in Production Build

[MTyson]

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>

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.

The app is live here, you might need to reload a couple times to see it.
http://35.223.159.8/

[MTyson]

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.

[MTyson]

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.

[MTyson]

[MTyson]

Where would one start debugging this? I can start digging in the code.

I guess when sveltekit comes out this will be obviated...

[bardobrado]

It only happens on chrome base browser..

I`m not having this issue on firefox, but in chrome, all mess up.

[antony]

I'm not sure what you're doing here, but I can't reproduce your issue, using chrome, or otherwise.

What I did notice on refresh is some severe layout shift, as if you're not fully understanding how SSR works, and are doing a lot of your work in the client side. It appears that all of your content renders, and then some css or js hides it all so that only the view you're looking at is shown.

It's possible that something in your javascript is breaking the client-side and that's why you're getting a double render.

If you can follow the issue template and fill in the required sections as requested it will be easier to help you.

[bardobrado]

I stayed the hole night trying to figure out if it was something wrong with my code, but happens that if I remove the images from Nav component, and place any other thing, the problem is finished. As soon as i put 2 different images, every thing rips apart. It gets easy be replicated with sapper template, and add 2 or 3 different images to Nav.svelte.

This bug happens on chrome and firefox just check below.

You can test here for a while:
https://mayarahto.com

After some chat, i think that sapper interpreter are trying to find < / img ">, but images doesnt finish like that, or we get an error, imgs finish />... so sapper bugs trying to find this tag that doesnt ecxists in html.

[softgripper]

^ I do not know that it's the image tag. I have seen the bug, and it's weird and inconsistent.

[antony]

There's so much going on with that site that I don't know where to begin.

I loaded it the first time in a fresh browser and I got a navigation bar with pink icons.
I loaded it again and I got duplicated icons (such as you describe in the issue)
Then I deleted the service worker and got a NGINX error

Then when I loaded it again a couple of times I got a different site

needless to say the error isn't recreatable any more, since the site with the issue seems to have disappeared.

I'm afraid there seems to be a need for more work to isolate and reliably reproduce this issue - it's a bit of a moving target at the moment.

You might remove the service worker to reduce the complexity of the app.

[bardobrado]

Sorry, i was testing other versions of sapper to see if it was without this problem, but my vps crashed and i have to rebuild it, in the meanwhile i got out of light in my building. I'll re-build the server again and warn you about it. But it is simple, where is writen on sapper template, Home, About, Blog, between "a" tag, change it, placing 3 different images, and you get the bug. Anyway..

[antony]

The way to create a repro for this is:

Get the buggy repro locally, make it as small as humanly possible so that the bug is really isolated, and run npm run build and then npx http-server __sapper__/build. If you can see the issue there, then commit the repro to github, so that we can do the same and have a look.

Beyond that, there are way too many things going on here to try to fix the issue.