Google Chrome 中的 CSS3 径向渐变渲染

Question

当我突然注意到一些奇怪的事情时，我正在使用 jQuery 为径向渐变设置动画（查看 this JSFiddle）。当鼠标指针移动到元素的左侧时，位置动画是平滑的，但是当鼠标指针移动到右边时，它根本不平滑（如果你移动鼠标足够慢，请注意位置的跳跃）。

这感觉像是某种舍入错误，但我不确定它为什么会发生。有任何想法吗？我暂时只在谷歌浏览器上测试过，只发生在水平方向。

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%)');
});

你能复制这个还是只发生在我身上？

编辑：在 Safari 中运行良好。

Answer 1

我可以复制它：就像this answer 中所说的那样，它并不顺利，因为它仅依赖于 mousemove 事件。尝试使用自动收报机，它依赖于时间间隔。我修改了你的小提琴以使用在已经链接的线程中找到的代码，这里是：http://jsfiddle.net/rh4Ljro4/

这里是相关的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;
});