I was working with a simple Transform:scale() animation in one of my projects and the result was (horrifyingly) choppy in chrome: jsfiddle.net/6gL9x38f/

if you check the demo in firefox, the scaled up div and the inner text look crisp during and after the animation but the same animation looks blurred up in chrome.

What might be the reason for this happening? How do I fix this?

Edit: This is an issue with Chrome 48 and older versions, seems to be fixed in v 49.