[BUG] Nextstrain fails to render correctly in the latest version of Firefox on Windows

[heliosfa]

Current Behavior
When loading the Novel Coronavirus build at https://nextstrain.org/ncov in the latest version of Firefox (and Waterfox Classic) on Windows, many of the branches of the phylogeny tree are not rendered as per this screenshot:

This issue has only started to occur in the last day (26/03/2020) and the tree used to render correctly on this platform/browser combination.

Expected behavior
I would expect the tree to render correctly as it does in Chrome:

How to reproduce
Steps to reproduce the current behavior:

1. Open https://nextstrain.org/ncov in the latest version of Firefox or Waterfox on Windows
2. See error

Your environment: if browsing Nextstrain online

• Operating system: Windows 10 Enterprise 1809, Windows 10 Education N 1909, Windows 8.1 Enterprise
• Browser: Firefox 74.0 (64-bit), Waterfox Classic 2020.03.1 (64-bit)

Additional context
This has been tested on multiple computers (including a disposable, non-persistent VM with the portable version of Firefox 74) with all add-ons disabled and with clean profiles.

Renders correctly in Firefox 74 and Waterfox Classic 2020.03.1 (64-Bit) on MacOS 10.14.6

[jameshadfield]

This bug was introduced via the SVG gradients applied in PR #947. Can confirm it works on Firefox 74 on MacOS, which implies it is OS specific.

[heliosfa]

@jameshadfield thanks for moving this to the correct repo and I'm glad it was easy to identify the cause - hopefully it's not too nasty to fix!

[jameshadfield]

I use MacOS (and we don't have any OS-specific testing) so thanks for raising this issue as we wouldn't have otherwise known about it! Hopefully someone who uses Windows can help with a fix (@ivan-aksamentov perhaps?)

[ivan-aksamentov]

@jameshadfield Sorry James, cannot help at this time. We are swamped with a project of ours.

But it's not a rocket science: I just run a Windows 7 guest in Virtualbox on my Ubuntu. Then run a browser in question and navigate to http://10.2.2.0:4000 (or 5000). This is the default address which maps to the host machine's localhost (on Ubuntu in my case), where auspice or nextstrain prod server runs. That's it. Hope you can nail it! 🤞

[emmahodcroft]

Can confirm this is also true for me, on Windows 10, running an older Firefoxx 72.0.2 (64-bit)

[emmahodcroft]

For me, some of the gradients render:

[lmoncla]

This happened to me here,

using Mac OSX 10.12.6, using Brave browser 1.4.96.

[gj262]

@jameshadfield ping me if you need help testing a fix i.e. I have a saucelabs.com account and can preview any changes you make. (I'd offer to help fix but my SVG knowledge is rusty.)

[cpsandbox]

Yes. This works on Linux/chrome/Firefox as well. @imoncla @heliosfa Is this on the first render or after changing the color by?

[heliosfa]

@cpsandbox this is on first render and after changing the color by.

I can get the full tree if I change the "color by" to something like "Exposure History" that is more monochrome

Playing about with the colour by options, some of the options with gradients render some of the branches some of the time. e.g. on this one coloured by Submission Date the yellow-grey gradients render, but the orange-grey one to Iceland/220/2020 does not:

Which branches render is not consistent by zoom level, e.g. zooming into the cluster of new Welsh cases:

Some of the branches render momentarily during a zoom onto a more specific part of the tree before disappearing.

[lmoncla]

@cpsandbox on initial render

[jameshadfield]

Closing this as we've reverted back to non-gradient branches. Thanks for all the detailed reports here!