RESOLVED CONFIGURATION CHANGED 117028
SVG elements become black after JavaScript is used 
https://bugs.webkit.org/show_bug.cgi?id=117028
Summary SVG elements become black after JavaScript is used
Ido Ran
Reported 2013-05-30 07:19:22 PDT
In the URL you can see we use several SVG elements in a page to draw gauges. We use Bootstrap carousel to show and hide several other gauges (a drill-down). After some play with clicking on the big gauges all the SVG elements in the screen become partially black. The exact same behavior happen use we use simple CSS change of display:none and display:block. Also the same behavior happen when we use jQuery show/hide methods. This does not happen on IE nor on Firefox. We notice the parts that become black are linear gradients we define in defs element.
Attachments
Add attachment proposed patch, testcase, etc.
Dirk Schulze
Comment 1 2013-06-13 22:55:46 PDT
(In reply to comment #0) > In the URL you can see we use several SVG elements in a page to draw gauges. > We use Bootstrap carousel to show and hide several other gauges (a drill-down). > After some play with clicking on the big gauges all the SVG elements in the screen become partially black. > The exact same behavior happen use we use simple CSS change of display:none and display:block. > Also the same behavior happen when we use jQuery show/hide methods. > > This does not happen on IE nor on Firefox. > > We notice the parts that become black are linear gradients we define in defs element. Hi, do you think you can reduce this example more? That would be really great.
Dirk Schulze
Comment 2 2013-06-13 22:59:22 PDT
(In reply to comment #1) > (In reply to comment #0) > > In the URL you can see we use several SVG elements in a page to draw gauges. > > We use Bootstrap carousel to show and hide several other gauges (a drill-down). > > After some play with clicking on the big gauges all the SVG elements in the screen become partially black. > > The exact same behavior happen use we use simple CSS change of display:none and display:block. > > Also the same behavior happen when we use jQuery show/hide methods. > > > > This does not happen on IE nor on Firefox. > > > > We notice the parts that become black are linear gradients we define in defs element. > > Hi, do you think you can reduce this example more? That would be really great. After looking a bit into the example, I realized that a lot of gradients use the same id (id's should be unique on a page). Not sure if the content is always the same as well.
Ido Ran
Comment 3 2013-06-13 23:03:56 PDT
Hi Dirk Schulze, We can try to reduce the repro to be simpler. We use the same IDs because they are under different svg tags. I can try to generate unique IDs for each def and see if it solve the problem but IMHO it will still remain a problem logically.
Ido Ran
Comment 4 2013-06-18 07:41:56 PDT
Hi, I can confirm that using unique ids for each element inside the SVG defs section solve this problem. I was under then assumption that can I use the same ids under different SVG elements but I now realize it is wrong because id must be unique in a page (http://www.w3schools.com/tags/att_global_id.asp). I still can't explain the behavior but that's solved now.
Rob Buis
Comment 5 2013-08-25 14:44:11 PDT
Seems like this bug report can be closed then?
Note You need to log in before you can comment on or make changes to this bug.