title: Using 'backdrop-filter' and 'padding or border-radius' doesn't work correctly
body: <p>I'm writing a tooltip, and want a tooltip's blur background. It works incorrectly when I add some 'padding, border-radius' properties.</p>
  
  <h2>Picture 1: Incorrect</h2>
  
  <p><img src="https://i.imgur.com/fcnCf5Vl.png" alt="Wrong area"></p>
  
  <p>There're the area that is not blur</p>
  
  <h2>Picture 2: Removed the padding, border-radius</h2>
  
  <p><img src="https://i.imgur.com/WobVR26.png" alt="img"></p>
  
  <h2>Try without ANGULAR (w3school)</h2>
  
  <p>I've already tried without <strong>Angular</strong> It looks wrong too.
  <strong>if you see at the top-left corner you will see it is not blur</strong></p>
  
  <p><img src="https://i.imgur.com/IQvarlo.png" alt="img"></p>
  
  <p><a href="https://www.w3schools.com/code/tryit.asp?filename=G80QORQ78GLD" rel="nofollow noreferrer">DEMO Link</a></p>
  
  <p>c1.component.css</p>
  
  <pre class="lang-css prettyprint-override"><code>#tooltip {
      /* Add the blur effect */
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
  
      /* Properties */
      position: absolute;
      left: 467px;
      height: auto;
      background-color: rgba(255, 255, 255, 0.788);
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      pointer-events: none;
      opacity: 1;
      transition: 0.13s;
  }
  </code></pre>
  
  <p>I don't know why this code in <strong>Angular</strong> shows some un-blur. There are some ways to deal with the un-blur area.</p>
  
  <h3>Stackblitz Demo 1: is wrong too</h3>
  
  <p>As @Gosha_Fighten provides the stackblitz project the problem still appears as picture below</p>
  
  <p><img src="https://i.imgur.com/H7XGimG.png" alt="img"></p>
  
  <h3>Picture 3: Zoomed</h3>
  
  <p><a href="https://i.stack.imgur.com/rQsul.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rQsul.png" alt="enter image description here"></a></p>
  
  <h3>Picture 4: Width is auto</h3>
  
  <p><a href="https://i.stack.imgur.com/95FkU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/95FkU.png" alt="enter image description here"></a></p>
  
  <h3>Picture 5: Width is fixed to 150px (OK)</h3>
  
  <p><a href="https://i.stack.imgur.com/5tzDx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5tzDx.png" alt="enter image description here"></a></p>
  
  <h3>Picture 6: Still not blurred at the top</h3>
  
  <p><a href="https://i.stack.imgur.com/XwAaV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XwAaV.png" alt="enter image description here"></a></p>