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.
(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.
(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.
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.
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.
Seems like this bug report can be closed then?