Page MenuHomePhabricator

clipPath ID collisions break rendering when multiple charts appear on the same page
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Put two charts on the same page

What happens?:
One of the charts renders very strangely

image.png (868×857 px, 74 KB)

What should have happened instead?:
The second chart should render normally, like it does when it's the only chart on the page:

image.png (501×818 px, 64 KB)

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia): master branch

Other information (browser name/version, screenshots, etc.):

Event Timeline

This appears to be caused by ID collisions between clip paths in the two SVGs. Both charts contain nodes like <clipPath id="zr0-c0">, <clipPath id="zr0-c1">, etc, and they both use the same numbering scheme. These IDs conflict with each other. We may be able to fix this by isolating the SVGs in their own document somehow, or by prefixing the IDs.

Catrope triaged this task as High priority.
Catrope edited projects, added Charts (Sprint 3); removed Charts.

Change #1058716 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/extensions/Chart@master] Prefix IDs in the SVG output to avoid ID collisions

https://gerrit.wikimedia.org/r/1058716

Catrope set the point value for this task to 1.Aug 1 2024, 6:02 PM

Change #1059163 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Chart@master] Test for unique ID

https://gerrit.wikimedia.org/r/1059163

Change #1058716 merged by jenkins-bot:

[mediawiki/extensions/Chart@master] Prefix IDs in the SVG output to avoid ID collisions

https://gerrit.wikimedia.org/r/1058716

Change #1059163 merged by jenkins-bot:

[mediawiki/extensions/Chart@master] Test for unique ID

https://gerrit.wikimedia.org/r/1059163