D3 extension transitions look horrible in Firefox/IE
Hi all, long(ish) time lurker, first time poster.
I designed a custom qlik sense extension at home to be used at my workplace which has an enterprise qlik sense server. The extension is a essentially a modified version of an existing gridchart i found on GitHub (https://github.com/skokenes/Qlik_Sense_Extension-GridChart) and I have modified it extensively to look like so (dummy data currently):
There are transitions for when a user clicks on a square, effectively making the square bigger and showing additional information. At the same time, all of the other squares fade to mostly transparent. There is a similar transition when the green/orange/red squares are clicked in the legend, all of the squares of colour NOT selected will fade to mostly transparent, making it visually obvious which squares are of the same colour as the square selected in the legend.
The crux of the issue is this: When I designed / tested this extension on Qlik Sense desktop it worked perfectly with very smooth transitions. I debugged it a bit in Google Chrome where the transitions also looked very nice and smooth. HOWEVER, now I have moved it onto the server at work it is quite horrible looking, looks like 1-3 fps for the transitions and 'jerky' in nature as well. I thought initially that the server might be struggling so I loaded it on Qlik Sense desktop AT WORK and once again, the transitions all ran perfectly. Finally, I ran the desktop version through both of my supported work browsers - Firefox and IE - and same thing as described above, 1-3 fps and very jerky transitions.
Any idea why this is occurring? It must be something client-side as it's happening on IE / Firefox regardless of if I use the app on the server or via the desktop installation. I would just remove / change the transitions to something 'less-intensive' if it wasn't for the fact that it obviously COULD work correctly as evidenced by viewing the app through Qlik Sense desktop application...