search

JonathanDn / vue-stars-rating

A highly dynamic vue stars rating component, similar to google play stars rating
103 stars 18 forks source link

Duplicate svg defs ids may cause issues #9

Open Owumaro opened 5 years ago

Owumaro commented 5 years ago

This issue is a bit harder to reproduce.

The generated stars svgs have a linearGradient with an id:

<linearGradient :id="`gradient${star.raw}`">

This id is supposed to be unique, but with 5 stars in a star rating, you will get at least 3 duplications of ids. But the browser can handle it.

Now if this component is used two times on the same page, the second component could use an id that was already defined in the <defs> of the first component. But the browser can still handle it.

Now ! Still with this component used twice, if the first one is rendered in the html, but isn't displayed (put a display: none; on it), this will break the second one. The gradient url reference is resolved to the defs of the first one and breaks: the stars aren't filled at all.

Sadly, with svgs there are no alternatives to id/url(#id)... The best solution I found is to prefix the gradient id with the _uid property of the vue component (which is different for each rating instance).

svennis94 commented 5 years ago

I am having the same issue as described here, I've got 2 instances of the plugin on the same page. They both have a different background so the colors of the stars need to be different to get some contrast.

First set of stars is on a purple background so the stars are white, the second set of stars is on a white background so the stars need to be purple.

The current implementation of the gradient id makes it that the second set of stars are white. Because #gradient1 is already declared at the first set of stars with the white stars.

I agree with what @Owumaro says, the best option as far as I am aware will be using the _uid property to differentiate the instances.

I'll create a pull request when I have some time.

Other than that great plugin :)

JonathanDn commented 3 years ago

Thank you guys for catching this sneaky bug @svennis94 and @Owumaro !

@svennis94 I encourage you to feel free and open a PR fix :) and glad that you liked it overall