Imagine having a basic radial gradient within a 200px square div with a 50px radius. You'd expect it to look something like this:
https://i.sstatic.net/UJI4o.jpg
Here is the code that works well in modern browsers.
#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">But here's the issue:
In Chrome version 53, if you raise the color-stop value close to 100 or above inside the gradient, the entire div turns black when hovered on. Firefox 49 and IE 11, on the other hand, work fine in the same scenario.