title: CSS backdrop-filter:blur in Safari and Chrome render problem
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    background: #555;
  }
  #container{
    height: 150px;
    width: 150px;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
  }
  #content{
    height: 150px;
    width: 150px;
    background-color: rgba(0,0,0,0.5);
    margin:50px;
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/oWhST.png" rel="nofollow noreferrer">This is on Safari</a> (This is what I want and should be)</p>
  <p><a href="https://i.stack.imgur.com/CZqqJ.png" rel="nofollow noreferrer">This is on Chrome</a> (This is wrong.)</p>
  <p>There is a problem here. If an object's parent and itself has the backdrop-filter property, this works fine in Safari browser but doesn't apply this CSS property to chrome child object. or not render. Is this a mistake? If it is error how can I solve it? Thanks for your help.</p>
  <p>(!!!) EDIT : The mess that is created ruins everything. The solution is valid for simple objects, but not a valid method for complex objects.</p>