Google Chrome中的CSS3径向渐变渲染

Question

当我突然发现一些奇怪的东西时，我用jQuery制作了径向渐变动画（查看this JSFiddle）。当鼠标指针移动到元素的左侧时，位置动画是平滑的，但是当向右移动时它根本不平滑（如果你将鼠标移得足够慢，请注意跳跃位置）。 / p>

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

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