ground filter blur transition issue

Question

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>

score 0 · Answer 1 · answered Dec 25 '22 at 22:55

Because the image fills <body>, but the .blur is 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 the div and take it from there.

var btn = document.querySelector('button');
var div = document.body;
            
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>

Thank you for your help but this didn't solve the problem my friend. the borders of the blurred part are broken while switching again — manekko, Dec 26 '22 at 08:32

ground filter blur transition issue

1 Answers1