thoughtworks
4km dashboard charts beats quickly on Firefox
Moving from Trello
Describe the bug As shown in the screen recording, the chart section flashes quickly on Firefox.
To Reproduce @gtycherry Can help to add more?
Expected behavior Should display charts normal as in Chrome
Screenshots
Desktop (please complete the following information):
- Browser [Firefox]
- Version [1.1.6]
overflow-x: auto seems to be the problem. It's over here
https://github.com/thoughtworks/metrik/blob/c0667a49a235557cde85af3ae3d50e7e0076ca2b/frontend/src/components/LineChart.tsx#L42
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
There's some sort of addition and removal of scroll bar because of this property, which is causing this issue
If we use overflow-x: scroll, firefox always shows a scroll which doesn't look great. I think we could remove it, I saw no problem in removing and resizing in my resolution. The container still seemed responsive. I don't see a scenario where scroll bars would appear because of the auto and it will be useful, because I could never use the scroll bar much (very little scrolling was available) even while resizing
@karuppiah7890 There was a feature to show the horizontal scroll bar for charts with more than 10 evaluation period. Means if you select a larger time period, like 6 months, the scroll bar shows to so that we see a fixed spacing between two adjacent points. Refer to code: https://github.com/thoughtworks/metrik/blob/c0667a49a235557cde85af3ae3d50e7e0076ca2b/frontend/src/components/LineChart.tsx#L37
A quick fix here is to use a component prop to toggle the overflow-x attr. Or, alternatively we can consider removing the "fixed spacing" feature, as it doesn't look so nice as expected by us.