Note: The issue mentioned below has been resolved in the latest version of Chrome (119.0.6045.200).
While transitioning on backdrop-filter, I have observed a dark inset shadow that is only visible during the transition.
This behavior seems to occur only in chrome/webkit based browsers on Windows (10 & 11). My current Chrome version is 'Version 116.0.5845.190 (Official Build) (64-bit)'
Interestingly, this issue occurs in Stack Overflow's inline 'run code snippet' but not in the code snippet editor. The same inset borders are also visible in my actual project.
I am looking for a solution to remove these inset borders. Is this a coding issue or unintended behavior by the browser?
Examples
Chrome displaying the issue:
https://i.stack.imgur.com/Yy536.gif
Meanwhile, Firefox appears unaffected:
https://i.stack.imgur.com/rDsar.gif
Example code:
In Chrome, clicking this button reveals black inset borders, although they are not visible within the Stack Overflow snippet editor. You can also observe this behavior in this JSFiddle.
function toggle() {
document.getElementsByClassName("inner")[0].classList.toggle('blurred')
}.inner {
margin: 20px;
padding: 10px;
width: 100%;
height: 200px;
display: inline-block;
border: 2px solid white;
border-bottom: 2px solid rgba(0, 0, 0, .1);
box-sizing: border-box;
transition: backdrop-filter 500ms;
}
.blurred {
backdrop-filter: blur(5px);
}
.text {
position: absolute;
left: 20%;
top: 20%;
font-size: 40px;
color: white;
font-family: sans-serif;
margin: 20px;
padding: 10px;
width: 100%;
height: 200px;
display: inline-block;
box-sizing: border-box;
}
.container {
margin: 10px;
display: flex;
position: relative;
background: linear-gradient(135deg, #57cdff, #05a915);
}<button onclick="toggle()">toggle backdrop-filter: blur(5px)</button>
<div class="container">
<div class="text">
Hello!
</div>
<div class="inner">
</div>
</div>