telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
466 stars 215 forks source link

Sparkline Chart tooltips flickering when browser is zoomed out #4120

Closed pferencgit closed 1 minute ago

pferencgit commented 11 months ago

Describe the bug When browser is zoomed out Sparkline Chart tooltips are flickering while moving the mouse over them. Probably connected to the flickering problem, the tooltip issue also prevents click events from firing over the sparkline.

To Reproduce https://codesandbox.io/p/sandbox/elated-lehmann-q4rdfh

  1. Open the above sandbox link in Chrome, Firefox or Opera
  2. Open the application test page in a new window
  3. Zoom out the browser to 67% or 50%
  4. Reload the page, keeping the zoom level reduced
  5. Move your mouse over the sparkline chart and see the tooltips flickering
  6. If the flickering issue is not reproduced, further reduce the zoom level and repeat steps 4 and 5
  7. In the sandbox example there's a click event handler attached to the SPAN containing the sparkline, incrementing a counter
  8. When the tooltip flickering is reproduced, see how the click event is not always fired when clicking on the sparkline chart

Expected behavior Tooltips and mouse events should work the same regardless the browser zoom level.

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

Browser The issue was tested and reproduced with the above method in the latest versions of Chrome, Firefox and Opera.

yanmariomenev commented 10 months ago

The flickering seems to be caused due to the border styles added to the Chart component:

<kendo-sparkline
        [data]="data"
        style="width: 150px; height: 20px; border: 1px black solid;"

To avoid such flickering, the developer would need to add the border to an outer element or the chartArea property of the Sparkline component:

https://codesandbox.io/p/sandbox/brave-panini-vds37v?file=%2Fsrc%2Fapp%2Fapp.component.ts

<kendo-sparkline
        [chartArea]="{ border: { dashType: 'solid', width: 1 } }"
        [data]="data"

Additional input from @tsvetomir would be necessary to determine if it should be considered a bug, as I wasn't able to reproduce it in React or jQuery Sparkline Charts.