crowdbounties@ if possible can you please provide test page for further triage.

I appreciate the challenges of reproducing this. Can you point us to a GitHub project or a staging server or something where we can look at the page that is trying to render.

To be clear, the issue is missing background colors, right? What type of element is the background color associated with?

Thank you for the replies and I apologize for the lack of detail and reproduction. Yes, it's missing the gradient background coloring in the hidden tabs. I think I narrowed it down to the following code. Note this is coffeescript.

				gradient = svg.append('svg:defs')
					.append('svg:linearGradient')
					.attr('id', 'gradient')
					.attr('x1', x1)
					.attr('y1', '0%')
					.attr('x2', x2)
					.attr('y2', '0%')
					.attr('spreadMethod', 'pad')

				gradient.append('svg:stop')
					.attr('offset', '0%')
					.attr('stop-color', color_1)
					.attr 'stop-opacity', .8

				gradient.append('svg:stop')
					.attr('offset',  "#{mean_percent}%")
					.attr('stop-color', color_2)
					.attr 'stop-opacity', 1

				gradient.append('svg:stop')
					.attr('offset', '100%')
					.attr('stop-color', color_3)
					.attr('stop-opacity', .8)

				svg.append('svg:rect')
					.attr("rx", 4)
					.attr("ry", 4)
					.attr('y', bar_y)
					.attr('x', bar_x)
					.attr('width', bar_w)
					.attr('height', bar_h)
					.style 'fill', 'url(benchmarking#gradient)'
					.style("stroke", bar_outline_color)
					.style("stroke-width", 1)

This code works in the default displayed Bootstrap tab, but not in the hidden content starting in Chrome 59.

When I remove this code and change the background colors to solid coloring, it works as expected in all tabs.

Are there any known changes that may account for this?

Thank you!

Thank you for providing more feedback. Adding requester "pbommana@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Narrowing it down further, it has something to do with this property:

     .style 'fill', 'url(benchmarking#gradient)'

This is no longer able to call the 'gradient' ID for the visualizations in the hidden Bootstrap tabs starting in Chrome 59. The default tab is working though.

I tried only using the ID tag:

     .style 'fill', 'url(#gradient)'

And using the full path to test:

     .style 'fill', 'url(http://localhost:3000/benchmarking#gradient)'

But the result was the same.

I successfully reproduced the issue on a test page:

https://codepen.io/anon/pen/OgXevy

The second tab displays the visualization in Chrome <= 58, but not Chrome 59.

Please advise. Thanks!

Bisected to:

https://chromium.googlesource.com/chromium/src/+log/65dff8b6da7b33d422b5e02356e58254fded9006..e8e3eea556d5713612f304b2c35e193658fa4f90

Very likely 533d683571c860e69bb3ecaf6214c5ceed25a808, or rather made visible by it , since we'd now correctly pick the first <linearGradient> with the 'gradient' id. Making this essentially a dupe of issue 258029 or  issue 448169  (or both.)

A workaround for this is to reference the gradient in the non-display-none subtree (by means of unique id.)

fs@, am I right then in concluding that this is a problem with d3 and Bootstrap, or the site, rather than a failure on our part?

Not really, it's an old bug of ours that now gained more visibility. It does seem quite common to end up in situations like this when using frameworks like these (probably because you tend to generate multiple independent fragments, and lacking a simple mechanism for avoiding duplication of the same paint server[s].)

> A workaround for this is to reference the gradient in the non-display-none subtree (by means of unique id.)

This is a bit over my head. Can someone help me understand how to implement the workaround within the context of my example here?
https://codepen.io/anon/pen/OgXevy

Thank you

https://codepen.io/anon/pen/BZLxeJ is a simple example of the workaround applied to the original pen.

Thank you fs@! I appreciate you help and patience with a novice like me.

Do you accept cryptocurrency tips? I'd be happy to support you. 

You're welcome. I do not accept tips, but thank you for your support nonetheless!

I have a similar issue, but don't know if I should file the bug separately?
https://jsfiddle.net/benhahne/031edweb/

I wasn't able to determine whether there is a standard for redefining the <defs> with the same id's :-/

c#15, yes that's the same issue. (And thanks for reminding me that I should dupe this...)

The NextAction date has arrived: 2017-06-26