Map colours on Firefox and Chrome

[AzimJaved]

Describe the bug Colours on Firefox and Chrome are vastly different, using the dark mode and, look ugly on Firefox.

To Reproduce Steps to reproduce the behavior: Visit the site using Firefox and Chrome.

Expected behavior Colours look like they do on Chrome even on Firefox.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser Firefox and Chrome
• Version Latest.

[phoenicopteri]

This also happens for active, recovered and deceased graphs

ACTIVE

RECOVERED

DECEASED

Seems to be happening post release of latest version of firefox (76.0), works fine for older versions

[shuklaayush]

Was this fixed?

[AzimJaved]

Was this fixed?

Not yet.

[shuklaayush]

I can't seem to reproduce this. Are you sure that this is not because of DarkReader?

[AzimJaved]

I'm not sure. I still have the issue in Incognito with all addons disabled. @phoenicopteri was able to reproduce it.

[phoenicopteri]

Yes, this is still reproducing without DarkReader Please note issue is only on firefox, chrome works fine

[bee-rickey]

@phoenicopteri @AzimJaved It's working for me on Mac. Are you both on windows?

[phoenicopteri]

Yes this is on Windows 10 for me

[shuklaayush]

Weird, it's working for me on Windows. Which version of Firefox are you guys on?

[AzimJaved]

Windows 10, Firefox 76.0.1 for me.

[phoenicopteri]

Firefox 76.0.1, it worked fine in Firefox 75.x

[shuklaayush]

I'm on the same version and it's working fine for me. Do you guys get any logs?

[phoenicopteri]

I did not get any logs. This issue seems to be happening on devices with the default Intel GPU only. Did not hit it on a Windows 7 machine with additional NVIDIA GeForce on it

[shuklaayush]

So, it probably has something to do with the SVG filters that we're using. Can you play around with those and see if changing anything fixes this?

[AzimJaved]

Removing url(#balance-colour) makes it similar, although not exactly the same as on Chrome for me. Removing it from both Chrome and Firefox make the maps identical for me. If it matters, I run an Nvidia GPU and have this issue. I do not believe it's related.

[shuklaayush]

So that's a custom SVG filter that we've defined in https://github.com/covid19india/covid19india-react/blob/c030fa8f9d8b3bf83d34cc5c8cdaea7c498e3d8e/src/components/choropleth.js#L474-L486

Can you check if removing the position/height style attributes from this filter helps? You'll find it here

[AzimJaved]

Nope, no change. The buttons below got shifted downwards a bit though.

[shuklaayush]

Yeah, ignore that. Looks like the filter is not working properly. This could be related to the GPU thing mentioned earlier. I'll read up and see if I can find anything

[AzimJaved]

Alright.

[ROHROCK]

Can we use cross-browser testing tools like Comparium or LambdaTest? I am also unable to replicate the bug, please share more details.

Details:

Firefox Version: Mozilla Firefox 77.0.1 OS: Ubuntu 18.04 Graphics Card: Intel Corporation HD Graphics 5500

[itechdivyanshu]

i think its a browser bug that happens sometimes

[shuklaayush]

Closing due to inactivity