删除css过滤器后，页面绘制时间保持很高

Question

我使用div作为框架来添加css过滤器的内容。

<div id="blurbox_wholescreen" class="blurbox">
    ...page content...
</div> 

过滤器通过css类激活。

.blurbox
{
    transform: translate3d(0,0,0);

    transition: all .5s ease;
}
.blurbox.blured
{
    filter: blur(4px) brightness(80%) contrast(130%);
    -webkit-filter: blur(4px) brightness(80%) contrast(130%);
}

当我切换课程时，模糊框的内容会模糊不清。

function menu_toggle()
{
    ...
    $("#blurbox_wholescreen").toggleClass("blured");
    ...
}

Chrome Inspector显示的“页面绘制时间”首先较低（大约7毫秒），并且在应用过滤器时按预期跳跃（大约25毫秒）。到目前为止一切都很好。

让我感到困扰的是，当我再次解开“.blured”课程时，它仍然很高。我预计FPS应该恢复默认值，因为性能重过滤器已被删除。但它没有，我很困惑。

解释某人或提示如何解决这个问题？