gradienty radialne nieoczekiwany webkit / chrome behaivor (pełna powierzchnia) - css, css3, google-chrome, webkit, radialnie-gradienty

jeśli mają prosty gradient radialny: (50px wewnątrz 200px div) To powinno wyglądać tak:

A oto kod dla nowoczesnych przeglądarek.

#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">

Teraz problem:

Jeśli zwiększysz 99-procentową wartość zatrzymania koloru wewnątrz gradientu (blisko) do 100 i powyżej, cały div stanie się czarny w chromie 53. Firefox 49 i IE 11 są w porządku. (: najedź kursorem na div)

Odpowiedzi:

To jest błąd, to samo dzieje się, gdy używasz także wartości px.

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