How to debug CSS3 rendering?

Question

I have large CSS rules which are mainly based on CSS3 transitions.

When I check the rendering time for a typical page with online tools like webpagetest.org or developer tools like firebug; the rendering time is extremely different in various browsers. For example, MSIE: 1.5s, Chrome:2.5, FireFox:47.0.

How can I debug which part of my CSS has caused unusual problem in FireFox?

Common tools like firebug only shows the total rendering time, and does not show which process (DOM and its CSS rule) is slow and blocking.

How to find the slow process in CSS rendering of FireFox?

Answer 1

No, unfortunately, we don't have anything much better than trial-and-error right now (see here). Chrome's native dev tools currently give us the most complete information about rendering and, from what I've heard, that's one of the most common requests they get.

As far as third party tools, ones that measure this at all are relatively rare. I knew of 2 in the past that I no longer use (http://ejohn.org/blog/browser-paint-events/ and http://www.browserscope.org/reflow/about). Mostly these help you know when repaints or reflows happen and estimate how long they take total.

However, CSS Paint Times and Profiling CSS for fun and profit mention ways to do profiling by property, but, if you look, neither is probably what you're hoping to see.

Is there a definitive way to measure "time to paint" for performance? and How to measure browser layout performance provide related information.

Also see http://jankfree.org/, which has up-to-date information and no links to a tool that automates the current trial-and-error approach.