使用GPU的CSS3全屏模糊

我有一个模糊的全屏背景图像：

#bg {
    background: url('bg.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    left:-120px;
    right:-120px;
    top:-120px;
    bottom:-120px;
    -webkit-filter: blur(60px);
    z-index: 1;
}

这很好，但我希望硬件加速模糊，因此我添加：

-webkit-transform: translate3d(0,0,0);   

这会提高性能，但模糊会丢失位置偏移，因此模糊图像不再填充整个屏幕。他们有办法避免这种情况吗

此处演示：

我删除了高度样式，并将所有左侧、顶部、右侧和底部样式更改为0

CSS 输出

---

您是否尝试将背景的宽度和高度设置为100%？为什么所有位置属性都有-120px？一个实时的演示将帮助您更容易地使用JSFIDLE更新，高度100%没有任何作用。这只是说明了问题-您可以看到模糊边缘周围的红色背景。

#bg {
    background-image:url('http://www.whitegadget.com/attachments/pc-wallpapers/16950d1224057972-landscape-wallpaper-blue-river-scenery-wallpapers.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    -webkit-filter: blur(60px);
    z-index: 1;
    -webkit-transform: translate3d(0,0,0);   
}