Anyone know a solution to this issue?
I have a div block with background-color black 20% opacity & backdrop-filter: blur(50px). When I'm scrolling and the div with the backdrop touches the viewport, there is a white 'glow' where it touches. What I need: the functionality of the backdrop-blur as it is when it is in the middle of the page. I only want it to blur what's behind it, not pick up on the edges of the viewport. This is in this case, since it's a dark div, only a problem when in light mode so the browser is white. When in dark mode, so it touches the viewport and it's dark, there is no issue. (see image)
<section>
<div class="background">
<img src="https://media.istockphoto.com/id/1461883500/vector/dark-grainy-color-gradient-wave-background-purple-red-yellow-blue-colors-banner-poster-cover.jpg?s=1024x1024&w=is&k=20&c=hn5m4QqOsGZXyOrVeTRha6voBVVod97vUeEWF5BaqgE=" alt="background">
</div>
<div class="container">
<div class="inner">
<h2> Lorem ipsum </h2>
<p>
Donec posuere pretium semper. In eget dui posuere, laoreet eros ac, pharetra libero. Ut pharetra sagittis nisl, non tempus erat faucibus in. Vestibulum porttitor ex maximus, ornare arcu ut, consectetur nunc. Phasellus id elit quis enim luctus condimentum. Nulla facilisi. Integer eu hendrerit eros. In faucibus tincidunt orci, eget commodo lectus rutrum vel. Duis porttitor, justo in laoreet mollis, urna sem convallis odio, ut placerat diam velit non risus. Mauris a condimentum felis, in posuere nibh. Curabitur et consequat mi. Donec egestas nec sapien vel tincidunt. Mauris suscipit dolor maximus ipsum imperdiet, sed gravida lectus rhoncus. Fusce dui magna, tincidunt a hendrerit sit amet, pretium at justo.
</p>
</div>
</div>
</section>
<style>
section {
position: relative;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.container {
height: 100vh;
position: relative;
z-index: 10;
padding: 100px 25px
}
.inner {
padding: 15px;
background-color: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(50px);
color: white;
}
</style>
Above is a code block as an example. If you scroll down, and the backdrop class (.inner) touches the browser (only when you're in light mode) there will be a glow at the top or at the place where the .inner touches the viewport.
The problem presents itself in (as far as I've tested) Google Chrome and Microsoft Edge, not Safari.
Does anyone know a solution to remove the 'glow'? It seems to be sampling the browser color? Is there maybe a way to trick our app into thinking its dark mode? I'm not finding anything or just not looking right.
