Google ChromeのCSS `フィルター：ぼかし（）;`問題 - `フィルタ：なし;`

Question

正しい行動尊敬ない：filter: blur();は、これはエッジに示されている（フライアウトメニューに適用されるべきではない、右手のスクリーンショット）。

Google Chromeは、フライアウトメニュー（左のスクリーンショット）で-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'; 

なぜごとに1と上の行を交換？ それは思わあなたは明らかに一定の影響を与えなかった体の全体にぼかしを適用し、私の最初のコードではので、DOMでParent->子の関係を壊しエッジで

position: fixed || absolute; 

を使用する場合位置付けされた#navメニュー。もはや身体要素の子ではありませんでした。

Google Chromeはすべきことをやっていました。