Manipulating background-image radial transition not working in chrome?
<p>I've created a ripple effect out of purely css that had worked nicely before in all browsers, now it looks like it currently isn't working in chrome but correctly in other browsers (excluding I.E, I don't test that junk) Curious as to why this is happening? I've exhausted my resources as to what's happening now in chrome for it to now work.</p>

<pre><code>&lt;a href="javascript:void(0)" class="btn-shadow btn-ripple"&gt;Button&lt;/a&gt;

[class^="btn"],
[class*=" btn"]
    display inline-flex
    font-family 'Roboto', sans-serif
    text-decoration none
    justify-content center
    align-items center
    text-align center
    cursor pointer
    white-space nowrap
    padding 8px 20px
    font-size 14px
    background-color white
    border-radius 2px
    color #434A54
    text-transform uppercase
    border none
    box-shadow 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
    transition all 0.4s ease-in-out
    background-position 50%
    outline none !important // we don't like outlines, nasty hobbits...
    &amp;:before {
        content: '';
        position: absolute;
        background: red;
    }
    &amp;:not([disabled])
        &amp;.btn-shadow
            &amp;:active
                box-shadow 0 5px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23)
        &amp;.btn-ripple
            transition all 0.4s ease-in-out
            background-size 200%
            &amp;:active
                background-repeat no-repeat
                background-size 1000%
                background-image radial-gradient(circle, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, 0) 11%)
</code></pre>

<p>See it happening here:
<a href="http://codepen.io/brycesnyder/pen/gPojeO?editors=1100" rel="nofollow">http://codepen.io/brycesnyder/pen/gPojeO?editors=1100</a></p>

<p>Thanks!</p>