谷歌浏览器中CSS3径向渐变的呈现

Question

我正在使用jQuery动画放射状渐变效果时，突然发现了一些奇怪的事情（请查看这个JSFiddle）。当鼠标指针移动到元素左侧时，位置动画很平滑，但当远离右侧时，它就不再平滑了（如果您足够慢地移动鼠标，就会注意到位置上的跳跃）。

这感觉像某种舍入误差，但我不确定为什么会发生。有什么想法吗？目前我只在Google Chrome上进行了测试，且仅在水平方向上出现。 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中运行良好。

- Mateo Gianolio

---

我无法复制它。你使用的是哪个版本？当你将鼠标移动到右边时，你的鼠标是否经过滚动条（因为这样mousemove事件不会触发）？ - soktinpk

我认为我正在使用最新的非测试版（无法立即检查），而且我没有悬停在滚动条上。效果在元素越大、鼠标移动到越右边时更清晰。 - Mateo Gianolio

在我的Windows 8上的Chrome浏览器中发生了这种情况。 - Zach Saucier

如果有帮助的话，请使用版本38.0.2125.104。 - Mateo Gianolio

Answer 1

我可以复制它：就像this answer中所说的那样，它不够流畅，因为它仅依赖于mousemove事件。尝试使用ticker，它依赖于时间间隔。我修改了你的fiddle，使用了已链接线程中找到的ticker，这是它：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;
});

- gere

---

这与原始版本有完全相同的问题。 - Zach Saucier

很抱歉，我要说这对我解决了问题。它只在边界附近有一些问题，但那是因为鼠标可能会经过滚动条。这可以通过减小容器的宽度和高度来解决，至少对我而言：http://jsfiddle.net/ufs8yL0b/ - gere

我也一样。 - Mateo Gianolio