Pressing the button blurs the background, but while transitioning, the edges of the div do not transition well. This problem exists in all browsers except firefox how can i fix it?
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
div.classList.toggle('blur');
}); body {
margin: 0;
background: url('https://images.pexels.com/photos/2763927/pexels-photo-2763927.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')no-repeat;
background-size: cover;
}
div {
width: 900px;
height: 900px;
transition: 1s ease;
}
.blur {
backdrop-filter: blur(20px);
transition: 1s ease;
}<body>
<div class="cube"></div>
<button>BLUR BUTTON</button>
</body>
Because the image fills
<body>, but the.bluris in the<div>, which is only 900x900 pixels.Quick fix:
Change:
var div = document.querySelector('div');to:
var div = document.body;Or: move the
background: url(..); background-size: ..to thedivand take it from there.