Chrome timeline - how can I determine the cause of a "Recalculate Style" log entry?

An alternative to the posted jQuery version for investigation is a simple one-liner in the console:

window.onanimationiteration = console.log;

This will print a line every time some animation runs, including the name of the animation and the element where the animation is applied to.

My advice to you would be to use the Chrome Canary build of Chrome. Paul Irish has a good demo of using the Timeline in Chrome Dev Tools here

You can simply click on the event, for instance 'Recalculate Style', and you should get a miniature stack trace pointing to where the event occurred in your code.

I was able to test if CSS transitions or animations were triggering recalculations on my page. I used jQuery to do this, but you can use whatever you want:

$('*').css('transition', 'none');$('*').css('animation', 'none');

This effectively disables transitions and animations on every element of your page. I ran them one at a time, and then reran my profiling. In my case, animations were the culprit.

.css('animation') will return something like

"myCustomAnimation 15s linear 0s infinite normal none running"

or if there is no animation,

"none 0s ease 0s 1 normal none running"

So after refreshing (to reenable the animations), the following snippet logs every element that has an animation defined:

$('*').each(function(){  if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want    console.log(this);  }});

By disabling animations on each of those individually, I was able to determine which one was causing my issues.