CSS3 Radial Gradient in Google Chrome
I am animating radial gradients using jQuery when I suddenly noticed something strange (check out this JSFiddle ). When the mouse is moved over the left side of the element, the position animation is smooth, but when far to the right, it is not smooth at all (note jumping in position if you move the mouse slowly enough).
It looks like some kind of rounding error, but I'm not sure why this is happening. Any ideas? I only tested it in Google Chrome 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 reproduce this or will it only happen to me?
EDIT: Works great in Safari.
source to share
I could reproduce it: as this answer says , it is not smooth because it only relies on the mousemove event. Try to use a ticker based on time frames. I modified your fiddle to use the ticker found in the already linked thread, here it is: http://jsfiddle.net/rh4Ljro4/
Here is the relevant javascript:
var container = $('body');
var contWidth = container.width();
var intervalId;
var mouseX, mouseY;
//this function is called 60 times per second.
function ticker(){
$(container).css('background', '-webkit-radial-gradient(' + mouseX + 'px ' + mouseY + 'px, transparent 10%, #000 5%)');
}
//this interval calls the ticker function every 16 milliseconds
intervalId = setInterval(ticker, 16); //33 millisecond is about 30 fps while 16 would be roughly 60fps
container.mousemove(function(e){
mouseX = e.offsetX; //store the current mouse position so we can reference it during the interval
mouseY = e.offsetY;
});
source to share