Question 249760 in CSS Question posted in
Some basic documentation can be found here.

Css – Transition on backdrop-filter blur causing dark inset borders (in chrome AND windows only)

During a transition on backdrop-filter, I’m noticing a dark inset shadow, only visible during the transition.

It seems this only happens in chrome/webkit based browsers on windows (10 & 11) :
My current chrome version is: ‘Version 116.0.5845.190 (Official Build) (64-bit)’

It also seems that this does happen in stackoverflows inline ‘run code snippet’
But not for stackoverflows code snippet editor
In my actual project I’m also seeing these inset borders.

I would like to get rid of the inset borders.
Is this an issue with the code or unintended/undefined behavior on the browsers part?

Examples

Chrome with issue:
chrome with visual issue
And Firefox seems fine:
enter image description here

Example code:

Clicking this button in chrome will show these black inset borders;
Though within stackoverflow snippet editor, the borders are not visible.
In this jsfiddle the behavior can also be observed.

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>
Tags:

2

Answers


  1. 0

    You can change the opacity of an element that already has a backdrop-filter.
    Changed your code a bit in the example:

    button.onclick = () =>  document.querySelector('.text').classList.toggle('blurred');
    .container {
  background: linear-gradient(135deg, #57cdff, #05a915);
  padding: 20px;
}

.text {
  font-family: sans-serif;
  font-size: 40px;
  color: white;
  border: 2px solid white;
  border-bottom-color: rgba(0, 0, 0, .1);
  min-height: 200px;
  display: grid;
  place-items: center;
  position: relative;
}

.text:after{
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(5px);
  transition: opacity .5s;
  opacity: 0;
  pointer-events: none;
}

.text.blurred:after {
  opacity: 1;
  pointer-events: auto;
}
    <button id="button">toggle backdrop-filter: blur(5px)</button>
<div class="container">
  <div class="text">Hello!</div>
</div>
    Login or Signup to reply.
  2. 0

    I’ve been experiencing the same issue and here are my findings:

    • It is not a matter of Windows or Windows 10 vs Windows 11. It is about whether Chrome is using "Use hardware acceleration when available" or not.
    • URL for this Chrome setting: chrome://settings/system
    • HW acceleration on: You get the shadow inset bug during transition, which then disappears once the transition is complete.
    • HW acceleration off: The image doesn’t get blurred from the edges.
    • Firefox has no issues.

    Whether Chrome 91 fixed this issue two years ago and it has since returned, I can’t say. My fix for right now was what imhvost suggested, which is to have the backdrop-filter blur effect on its own div always, and simply transition the opacity of that div from 0 to 1. It’s not ideal, but it gets the job done for now while I wait and hope they fix the behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search