I was animating radial gradients with jQuery when I suddenly noticed something strange (check out this JSFiddle). When the mouse pointer is moved over the left side of the element the position animation is smooth, but when far to the right it isn't smooth at all (notice the jumps in position if you move your mouse slowly enough).

This feels like some kind of rounding error, but I'm not sure as to why it happens. Any ideas? I have only tested it on Google Chrome for the time being and it only happens in the horizontal direction.

CSS

html { background: #fff; } html, body { width: 100%; height: 100%; } body { background: #000; }

JavaScript

$('body').on('mousemove', function(event) { var x = event.pageX; var y = event.pageY; $(this).css('background', '-webkit-radial-gradient(' + x + 'px ' + y + 'px, transparent 10%, #000 5%)'); });

Can you replicate this or does it only happen to me?

EDIT: Works fine in Safari.