Problem with backdrop-filter, position relative and absolute

Question

I have a problem. I know the bug that exists with backdrop-filter when I use it on a parent div that has child divs that use position: absolute. So I decided to do the blur effect using the :before, but the problem comes when I use the position: relative on the parent div, because inside there are other child divs using position: absolute that I want to fill the whole monitor.

Here is an example.

body {background: url(https://images.adsttc.com/media/images/5d44/14fa/284d/d1fd/3a00/003d/large_jpg/eiffel-tower-in-paris-151-medium.jpg?1564742900)}
  
.paris {position: relative; width: 200px; height: 200px; background: #0000004d}
.paris:before {content: ""; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(10px); top: 0; left: 0; display: block}

.london {position: absolute; background: red; width: 100%; height: 50px; top: 50px}

<div class="paris">
  <div class="london"></div>
  </div>

If I remove the position: relative from the class named "Paris", it will bug the backdrop-filter as it will fill the whole screen with blur, but if I include it, it will bug the div class named "London", as it will no longer occupy 100% of the screen, but the one of the parent div.

What alternative do I have?

(I can't change the order because the site is not mine, it's a forum that doesn't allow to change the order of the code).

Answer 1

that's what I would suggest

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
  background: url(https://images.adsttc.com/media/images/5d44/14fa/284d/d1fd/3a00/003d/large_jpg/eiffel-tower-in-paris-151-medium.jpg?1564742900);
}

.paris {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
}

.london {
  position: absolute;
  background: red;
  width: 100%;
  height: 50px;
  top: 50px;
}

<div class="paris">
  <div class="london"></div>
  </div>