While experimenting with animating radial gradients using jQuery, I came across an interesting observation (take a look at this JSFiddle). As I moved the mouse pointer over the left side of the element, the position animation appeared smooth. However, moving it to the far right resulted in a less smooth experience, with noticeable jumps in position if the mouse was moved slowly enough.
This inconsistency seems like some sort of rounding error, but the reason behind it remains unclear to me. Any thoughts or insights on why this might be happening? I've only tested it on Google Chrome so far, and the issue seems to occur only 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 anyone else replicate this issue, or is it just affecting me?
EDIT: It seems to work fine in Safari.