css - 径向渐变意外的 webkit/chrome 行为(整个区域)

Question

如果有一个简单的径向渐变:(200 像素方形 div 内的 50 像素)它应该看起来像这样:

这是现代浏览器的代码。

#circle {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  background-image: radial-gradient(50px at 50% 50%, black 99%, transparent 0); 
  background-repeat: no-repeat;
}

#circle:hover {
  background-image: radial-gradient(50px at 50% 50%, black 99.7%, transparent 0); 
}

<div id="circle">

现在解决问题:

如果将渐变(接近)内的 99% color-stop 值增加到 100 及以上，整个 div 在 chrome 53 中变为黑色。Firefox 49 和 IE 11 没问题。 (:将鼠标悬停在 div 上)

Answer 1

这是一个错误，当您也使用 px 值时会发生同样的事情。

background-image: radial-gradient(50px at 50% 50%, black 50px, transparent 0);