search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

Graph "shivering" under chrome with very specifics conditions #1150

Open walfrat opened 5 years ago

walfrat commented 5 years ago

I'm submitting a ... (check one with "x")

Current behavior

Animations is shivering and extremely slow, removing the animations let the bar still shivering. Graph's bar are "shivering" under very specifics condition under Chrome only.

Stackblitz : https://stackblitz.com/edit/ngx-charts-dqijaq?file=app%2Fapp.component.html

Expected behavior No shivering.

Reproduction of the problem Open the following stackblitz with a resolution of 1920 width. Then zoom out once (the total width would be around 2120, zoom level will be at 90%). Under my screen, the bar of the graph are "shivering" , more precisely, they're constently chaging their width by 1 (switching between two consecutive values forth and back).

Note that I'm note using the view parameter, I'm relying on the parent width which is a decimal value on purpose, because Chrome allow them (and I have such values generated by angular and flex-layout unfortunately).

If you look the HTML you'll see that the inner part of the graphs have values moving around (width of bar moving of +1/-1 the first translate in the svg graph also).

However the values also play a part in the problem, if you set the values of the graph above 10000 or under 1000 it doesn't happens anymore.

After comparing with Firefox one thing attracted my attention, whenever I checked width under firefox numbers where always integer. However under chrome you can have decimals.

I think I just stumble upon on issue where this could be a problem probably because ngx-chart assume they're rounded when they may not be. I think it is possible that somehow ngx-charts is listening for the width and always find a different value with chrome because of the rounded vs not rounded issue and the graph keep adjusting itself without ever suceedding

Though the stackblitz I provided is happening with an old version, I reproduce the problem with very recent version under my environment

Please tell us about your environment: Windows 10, Visual Studio Code recent version, NPM recent version.

marjan-georgiev commented 5 years ago

@walfrat I'm having trouble reproducing this issue.

Could you check whether this still occurs with the latest version? We pushed a change making the bar widths integers, so that might have solved this as well.

walfrat commented 5 years ago

I am not reproducing the issue on the stackblitz anymore. Even without changing ngx-charts's version. My browser has been updated to 75 since. So maybe this was a corner case from Chrome in that version that has been fixed.

JPMardelli commented 5 years ago

I am seeing this issue again on Chrome 77 under specific conditions. It seems to only happen on graphs with decimal values