Crazy private memory usage when using css gradient

Can someone tell me why this uses such crazy amounts of private memory? Just at page load my task manager shows 300mb, and every button click that memory goes up a huge arbitrary amount, until it crashes. Tested on chrome.

JSFiddle: http://ift.tt/1GOQ5o8

<div id='main-box' class="BodyGradient BodyBorder" >
    <div id="muteBox1" onclick="moveBtnDown(this)" onmouseup="moveBtnUp(this)">
        MUTE
    </div>

var clickedFlag = false;

function moveBtnDown(btn) {
    clickedFlag = true;
    var top = $(btn).css('top');
    var left = $(btn).css('left');
    $(btn).css('top', parseInt(top) + 1);
    $(btn).css('left', parseInt(left) + 1);
}

function moveBtnUp(btn) {
    if (clickedFlag) {
        var top = $(btn).css('top');
        var left = $(btn).css('left');
        $(btn).css('top', parseInt(top) - 1)
        $(btn).css('left', parseInt(left) - 1);
        clickedFlag = false;
    }
}

#muteBox1 {
    position: absolute;
    color: #DEDEDE;
    font-family: sans-serif;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    top:175px;
    left:45px;
    width:60px;
    height: 30px;
    border-radius: 15%;
    border: 1px solid #DEDEDE;
    background-color: #808080;
    cursor: pointer;
}
div#main-box {
    position: absolute;
    margin: auto;
    left:0px;
    right:2px;
    top:0px;
    width: 1068px;
    height: 848px;
}
.BodyGradient {
    background: #495F5F;
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #495F5F), color-stop(1.2, #DEDEDD));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom left, #495F5F 0%, #DEDEDD 120%);
}
.BodyBorder
{
    border: #DEFFFD;/* solid 0px 3px 3px 0px;*/
    border-right: #676671 solid 5px;
    border-bottom: #4F4F55 solid 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}