Welcome.
Hey there, what you're going through is not uncommon. This is how the backdrop-filter style rule functions based on W3C standards*. When combined with the transition style rule and no background, it results in the issue you are facing.
Solution and Coding Tips.
Before we delve into the solution, I must mention that I advise against using the backdrop-filter due to its limited support, as indicated by a reputable source*. Instead, consider utilizing the filter rule which enjoys broader support*
Now, let's address some coding errors and provides fixes for your problem:
body{
background-image: url("https://i.pinimg.com/originals/d2/64/ce/d264ce996ff6531fe191dfce5b200b3a.jpg");
background-position: center;
background-repeat: no-repeat;
background-color:yellow;
}
#el{
position:fixed;
top:14px;
left:14px;
right:14px;
bottom:14px;
-webkit-transition: all 7s;
-moz-transition: all 7s;
-o-transition: all 7s;
transition: all 7s;
}
#el.changeState{
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="Clicked()">Blur Me (:</button>
<script>
function Clicked() {
var el = document.getElementById('el');
el.innerHTML = ":O";
el.classList.add('changeState');
}
</script>
<p id="el"></p>
</body>
</html>
To improve this code:
(function addBlurEffect() {
const d = document;
function getId(id) {
return d.getElementById(id);
}
let emptyParagaphTag = getId(`addTextTo`);
let button = getId(`listeningToButton`);
button.addEventListener(`click`, function stateClicked() {
this.innerHTML = `:O`;
emptyParagaphTag.classList.add(`changeState`);
// No overflows ;)
button.removeEventListener(`click`, stateClicked);
});
})();
// In my opinion, this Javascript code is much cleaner!
body {
background-image: url("https://i.pinimg.com/originals/d2/64/ce/d264ce996ff6531fe191dfce5b200b3a.jpg");
background-position: center;
background-repeat: no-repeat;
background-color: yellow; /* This wouldn't work... since it wold be covered.. I don't understand what you want with that, other than getting blinded? */
}
#addTextTo {
position:fixed;
top:14px;
left:14px;
right:14px;
bottom:14px;
-webkit-transition: all 7s;
-moz-transition: all 7s;
-o-transition: all 7s;
transition: all 7s;
background: rgba(255, 255, 255, 0.4); /* You forgot to add this! */
}
.changeState {
filter: blur(7px); /* Much better! */
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Example</title>
</head>
<body>
<!-- HTML code is free to breath now, nothing to be clogged here. -->
<button id="listeningToButton">Click to Blur (:</button>
<p id="addTextTo"></p>
</body>
</html>
Final Thoughts.
I hope this information has been helpful in resolving your issue and clarifying any confusion. Feel free to ask questions regarding any aspect of the code.
References.
(*) = Important Links!
W3C => https://www.w3.org/TR/filter-effects-1/#supported-filter-functions
CanIUse backdrop-filter (not recommended) => https://caniuse.com/#search=backdrop%20filter
CanIUse filter (recommended) => https://caniuse.com/#search=CSS%20Filter%20Effects