使用css渐变时疯狂的私有内存使用情况

Question

有人能告诉我为什么这会使用如此疯狂的私人记忆吗？只是在页面加载时，我的任务管理器显示300mb，并且每个按钮点击该内存上升了一个巨大的任意数量，直到它崩溃。测试铬。

JSFiddle：https://jsfiddle.net/q1wLa752/

<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;
}