SVG Fails to display properly

[augyg]

Fail State:

Should look like:

given the code:

Note: the comment in the code made no difference with or without

This happens on Firefox and Chrome ( which is all that I've tested )

this page is deployed here, to test out the behavior I describe next ( https://aceinterviewprep.app/landing/base )

On initial request to get the page it renders perfectly fine however if you click on any link (eg. login) and then hit the back button or click solutions > coding bootcamps (or any) then click the Ace logo to go back then you will see the top image

I have no understanding of why this is happening but even if my code is funky, it should still render the same each time right?

[augyg]

I can see that when it loads properly it has the data-ssr attribute

I have no idea why or if this matters though, I'm guessing hydration?

[augyg]

It seems that the only way it displays properly is from the initial server side render.

prerender_ mySvg mySvg also recreates the issue

[alexfmpe]

#828 seems relevant
Think I also ran into this a long time ago, but workarounded some other way.

[augyg]

thanks @alexfmpe, based on what I saw with the outdated reflex-dom-SVG package and some investigation, I wouldn't be surprised if the workaround in #828 would work here

I just made the SVG in figma instead but hopefully I can test this soon.

Feels like this should become part of FAQ for reflex-dom as the behavior is relatively surprising, I wonder if reflex-dom-contrib has solutions yet