Chrome 59 doesn't render svg visualizations correctly when hidden behind Bootstrap tabs?

[Crb99]

Hi all,

I ran into a problem that started with Chrome 59. Can someone help me determine which change in Chrome 59 is causing this?

I have d3.js visualizations hidden in Bootstrap tabs. When a tab is clicked, the visualizations are displayed. This works great in Chrome 58 and earlier. It also works in Safari. Now with Chrome 59, the d3.js charts don't render properly when a new tab is clicked. 

More specifically, it renders the visualization in the selected tab without the background colors for some reason. The visualizations in the default selected tab are working properly.

The problem is similar to this issue described in this Stack Overflow:

https://stackoverflow.com/questions/21563609/nvd3-charts-not-rendering-correctly-in-hidden-tab

However the solutions suggested there do not work anymore. The 'resize' event doesn't fix the issue.

I tested with the most recent versions of d3.js and Bootstrap without luck.

My environment is Mac. I haven't tested on PC.

Thank you!

[Lei Zhang]

In general, use https://crbug.com/ to file bug reports.

This may be https://crbug.com/730848 or related. Can you check Chrome
Canary and see if the bug persists there? If yes, please file a bug.

> --
> --
> Chromium Developers mailing list: chromi...@chromium.org
> View archives, change email options, or unsubscribe:
> http://groups.google.com/a/chromium.org/group/chromium-dev
> ---
> You received this message because you are subscribed to the Google Groups
> "Chromium-dev" group.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/605e567f-a4e7-42e4-b4ba-9452a24d7c1f%40chromium.org.

[Crb99]

Thank you for your reply. I can file a bug, but I'm not sure if this is a bug or a result of an intentional update. So I thought I'd start here first.

I don't think it's related to the bug you shared. That bug is about browser tabs. My issue is related to Bootstrap tabs.

[Crb99]

I think I've narrowed it down to this gradient code that's no longer working. 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)

[Crb99]

I was able to reproduce the problem here:

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

Any ideas? Thanks

[Lei Zhang]

Once again, please file a bug.

> --
> --
> Chromium Developers mailing list: chromi...@chromium.org
> View archives, change email options, or unsubscribe:
> http://groups.google.com/a/chromium.org/group/chromium-dev
> ---
> You received this message because you are subscribed to the Google Groups
> "Chromium-dev" group.
> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/1888e71e-88d1-4553-8319-818df9c3d04d%40chromium.org.