Google Chrome CSS `filter: blur();` issue – `filter: none;` not respected
<p><a href="https://i.stack.imgur.com/vPeOo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vPeOo.png" alt="Google Chrome CSS Blur Problem"></a></p>

<p>Correct behaviour: <code>filter: blur();</code> should not be applied to the flyout menu (this is shown in Edge, right-hand screenshot).</p>

<p>Google Chrome is ignoring <code>-webkit-filter: none;</code> on the flyout menu (left-hand screenshot).</p>

<p><strong>CSS Code:</strong></p>

<pre><code>#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 */
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>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
}
</code></pre>

<p>Any ideas on a possible workaround for Chrome? </p>