gilbarbara/react-inlinesvg

ID hash issue

Otouto opened this issue · 4 comments

Otouto commented

Hello, I've faced one strange issue. If you try to render the same icon twice and first one is hidden (with display: none or visibility: hidden) it's corrupt rendering, because browser fails to apply hidden masks correctly.

It's look like this: https://jsfiddle.net/Ln5pyzx4/
But should be: https://jsfiddle.net/Ln5pyzx4/1/
It is real result of inlinesvg generation.

I understand that this is very rare case, but would you consider using part of timestamp or math.random while generating hash for svg element id's? I think it will make uniquifyIDs more solid.

gilbarbara commented

hey,

Let me see if understood correctly.
The second SVG component using the same src would break because is trying to apply the first component defs using the same ID.

Yeah, I see that happening since the id is the same. I will fix for the next release.

gilbarbara commented

fixed in 0.7.0

patotoma commented

I found this bug is still presented in 0.7.0,
have to use custom uniqueHash property as a workaround.

gilbarbara commented

@patotoma please post some example code. I couldn't replicate this.