Google Chrome CSS`过滤器：blur（）;`issue - `filter：none;`不受尊重

Question

正确的行为：filter: blur();不应该应用于弹出菜单（这在Edge，右侧屏幕截图中显示）。

谷歌浏览器忽略了弹出菜单上的-webkit-filter: none;（左侧屏幕截图）。

CSS代码：

#nav { /* Default Navigation Style */
    position: fixed;
    left: -100vw; /* Ensure the Nav is hidden offscreen */
    top: 0;

    width: 0;
    height: 100vh;
    max-height: 100%;

    padding: 5px;

    background-color: rgba(0,0,0,0.75);

    font-size: 4vmin;

    overflow: hidden;
    transition: left 0.5s linear, width 0.5s linear;
    z-index: 999;
}

#nav.open {
    left: 0;
    width: 15vw;

    -webkit-filter: none;
    filter: none; 
}

.nav-open { /* When the Menu is open, blur everything */
    filter: blur(5px);
} /* This gets applied to body and header elements through JavaScript */

使用Javascript：

var mouseDown = false;

function showMenu() {
    document.querySelector('#nav').className = 'open';
    document.querySelector('body').className = 'nav-open';
    document.querySelector('#header').className = 'nav-open';
    document.querySelector('#nav').focus();
}

function hideMenu() {
    if(mouseDown) { // Prevents the Menu from being hidden when a link is clicked inside it.
            document.querySelector('#nav').focus();
            mouseDown = false;
    }else{ // If no link was clicked, hide the menu
        document.querySelector('#nav').className = '';
        document.querySelector('body').className = ''
        document.querySelector('#header').className = '';
    }
}

document.querySelector('a').onmousedown = function() {
    mouseDown = true; // Detects if a link was clicked
}

有关Chrome可能解决方法的任何想法？

Answer 1

发现问题：

document.querySelector('body').className = 'nav-open';

修正： 将上面的行替换为每个主要DIV元素的一行

document.querySelector('#content').className = 'nav-open';
document.querySelector('#slideshow').className = 'nav-open';
document.querySelector('#header').className = 'nav-open';
document.querySelector('#footer').className = 'nav-open';

为什么呢？ 看来，当你使用

position: fixed || absolute;

在Edge中，这显然打破了DOM中的Parent-＆gt; Child关系，因此在我的第一个代码中，将模糊应用于整个主体并不影响固定定位的#nav菜单。它不再是身体元素的孩子。

Google Chrome正在做它应该做的事情。