title: Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'
body: <p>I do face a rendering problem using backdrop-filter: blur(12px); in Chrome 76 on MacOS Mojave. Whenever I start to hover with my mouse over the opened tabs in Chrome, the div using the backdrop-filter starts flickering and the div is subdivided into smaller rectangles having different colors and are split by horizontal lines with shadows.</p>
  
  <p>I don't know if it's a rendering problem, a glitch, some overflow problem or just a bug in Chrome. </p>
  
  <p><a href="https://jsfiddle.net/jd3987nf/" rel="noreferrer">Here</a> is the fiddle.</p>
  
  <p>I already tried variations of: </p>
  
  <ul>
  <li>transform: translateZ(0);</li>
  <li>backface-visibility: hidden;</li>
  <li>overflow: hidden;</li>
  <li>margin: 0</li>
  <li>will-change:top;</li>
  <li>position: static;</li>
  </ul>
  
  <p>Nothing seemed to work.</p>
  
  <p>Minimal Example: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="articleViewOverlay" class="articleViewOverlay"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.articleViewOverlay {
      position: fixed;
      width: 200px;
      height: 200px;
      border-style: dashed;
      backdrop-filter: blur(12px);
      background-color: rgba(125, 125, 125, 0.4); 
      margin: 0; 
      overflow: hidden;
  }
  </code></pre>