this is a strange one and took me a while to troubleshoot, but basically, if you have jQuery UI included in your website and you try to use Kendo UI charts, if you try and load the page but switch to another tab, when you come back to the tab with the chart on it, the chart's animation either a) doesn't work at all or b) only partially works or c) actually works (rarely). If you keep the tab in focus, the animation plays out perfectly.
Here's an example I set up which exhibits this behaviour in both FF and Chrome: http://jsfiddle.net/mdvxG/
To replicate, hit the "run" button and quickly switch tabs, then after a couple of seconds, switch back. Most of the time, you'll observe that the chart has not played out its animation successfully. Compare with just hitting the "run" button without switching tabs.
1 Answer, 1 is accepted
Thank you for reporting this problem. We've fixed it and the fix will be available in the next internal build.
For the moment, you can use the following workaround:
$.easing.swing = $.easing.jswing;
$("#chart").kendoChart({
...
What causes the error:
- jQuery UI includes the jQuery easing plugin that replaces the default swing easing function.
- The browser throttles the calls to setTimeout callbacks in background tabs, leading to an extended animation duration.
- The Chart calls the easing function with incorrect "time" parameter that is outside of the [0, 1] range. This brakes the new swing function, but not the old one.
- We've fixed it by capping time to 1.
As a token of gratitude for your involvement your Telerik points have been updated.
Greetings,Tsvetomir Tsonev
the Telerik team