javascript - CSS3 radial gradient rendering in Google Chrome -

javascript - CSS3 radial gradient rendering in Google Chrome -

i animating radial gradients jquery when noticed unusual (check out this jsfiddle). when mouse pointer moved on left side of element position animation smooth, when far right isn't smooth @ (notice jumps in position if move mouse enough).

this feels kind of rounding error, i'm not sure why happens. ideas? have tested on google chrome time beingness , happens in 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 replicate or happen me?

edit: works fine in safari.

i replicate it: it's said in this answer, it's not smooth because it's relying on mousemove event only. seek utilize ticker, that's relying on time intervals. modified fiddle utilize ticker found in linked thread, here is: http://jsfiddle.net/rh4ljro4/

here relevant javascript:

var container = $('body'); var contwidth = container.width(); var intervalid; var mousex, mousey; //this function called 60 times per second. function ticker(){ $(container).css('background', '-webkit-radial-gradient(' + mousex + 'px ' + mousey + 'px, transparent 10%, #000 5%)'); } //this interval calls ticker function every 16 milliseconds intervalid = setinterval(ticker, 16); //33 millisecond 30 fps while 16 60fps container.mousemove(function(e){ mousex = e.offsetx; //store current mouse position can reference during interval mousey = e.offsety; });

javascript jquery html css3 google-chrome