title: Glitch in Safari when using backdrop filters
body: <p>I'm experiencing a strange collection of glitches when using backdrop filters on a pseudo element. I'm using the blur and saturate filters.</p>
  
  <p>I know that this is relatively new CSS and is only supported by Safari as far as I've read, but I'm wondering if anyone has had similar problems and if there's a workaround for this?</p>
  
  <p>I have a hover menu on my website in which the submenu has a little arrow at the top. I've made this using <code>border-left</code>, <code>border-right</code> and <code>border-bottom</code>. I've tried to apply the same backdrop filters to the pseudo element arrow that I've applied to the submenu itself, but this is resulting in glitchy colours appearing every time I hover over the main menu link. Sometimes they work okay, but depending on their positioning over the background image, this problem does consistently occur at various viewport widths.</p>
  
  <p><a href="https://jsfiddle.net/fm1cg4n4/4/" rel="nofollow noreferrer">https://jsfiddle.net/fm1cg4n4/4/</a></p>
  
  <pre><code>&lt;header class="header"&gt;
  
    &lt;nav class="menu"&gt;
  
      &lt;ul&gt;
  
        &lt;li&gt;Menu Link 1
          &lt;ul&gt;
            &lt;li&gt;Submenu Link 1&lt;/li&gt;
            &lt;li&gt;Submenu Link 2&lt;/li&gt;
            &lt;li&gt;Submenu Link 3&lt;/li&gt;
            &lt;li&gt;Submenu Link 4&lt;/li&gt;
            &lt;li&gt;Submenu Link 5&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
  
    &lt;/nav&gt;
  
  &lt;/header&gt;
  
  body {
    background-image: url(http://www.lucieaverillphotography.co.uk/wp-content/uploads/2017/01/15974858_10154941714967990_2444361563480701659_o.jpg);
    background-size:cover;
  }
  
  .header {
    position:absolute;
    height:55px;
    width:100%;
  }
  
  nav ul {
    display:flex;
    height:55px;
    margin:0;
    padding:0;
  }
  
  nav ul li {
    padding:10px;
    list-style:none;
    color:#fff;
  }
  
  nav ul ul {
    position:absolute;
    top:100%;
    left:10px;
    z-index:10;
    display:block;
    min-width:185px;
    height:auto;
    padding: 2px 0px;
    background-color:#ffffff;
    opacity:0;
    pointer-events:none;
  
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(7px) saturate(200%);
      backdrop-filter: blur(7px) saturate(200%);
    border-style:none;
  
    transition: opacity 0.5s ease 0s;
  }
  
  nav ul li:hover ul {
    pointer-events:auto;
    opacity:1;
  }
  
  nav ul ul:before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 26px;
    margin-top: -2px;
  
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(7px) saturate(200%);
    backdrop-filter: blur(7px) saturate(200%);
  }
  
  nav ul ul li {
    color:#444;
  }
  </code></pre>