CODEWITHSUNDEEP
cssfiltertransitionbackdrop
manekko
manekko

Reputation: 5

ground filter blur transition issue

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>

Upvotes: 0

Views: 75

Answers (1)

Rene van der Lende
Rene van der Lende

Reputation: 5281

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>

Upvotes: 0

Related Questions