Skip to content

Instantly share code, notes, and snippets.

@myfonj
Last active June 27, 2016 21:33
Show Gist options
  • Save myfonj/cc1c8e8b29d49d3dcb641a43d38f27a9 to your computer and use it in GitHub Desktop.
Save myfonj/cc1c8e8b29d49d3dcb641a43d38f27a9 to your computer and use it in GitHub Desktop.
Chrome radial-gradient closest-side color stop nearing 100% clamps to infinity
/** Chrome radial-gradient closest-side color stop nearing 100% clamps to infinity
*/
.a { background-image: radial-gradient(closest-side, red 50%, white 0) }
.b { background-image: radial-gradient(closest-side, red 99%, white 0) }
.c { background-image: radial-gradient(closest-side, red 99.609371185302727214061491167740314267575740814208984374%, white 0)}
.d { background-image: radial-gradient(closest-side, red 99.609371185302727214061491167740314267575740814208984375%, white 0)}
.e { background-image: radial-gradient(closest-side, red 100%, white 0)}
p { width: 15vw; height: 15vw; margin-right: 2vw; background-color: #ccc; float: left; word-break: break-all; word-wrap: break-word; border: 1px solid; }
<p class="a">50% (OK)
<p class="b">99% (OK)
<p class="c">99.609371185302727214061491167740314267575740814208984374% (still OK)
<p class="d">99.609371185302727214061491167740314267575740814208984375% (error in Chrome)
<p class="e">100% (error in Chrome)
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment