1

I have an element with -webkit-box-reflect, and another element with backdrop-filter/-webkit-backdrop-filter above the element's reflection. My problem is that as the reflected element moves, the backdrop-filter blurs too quickly, making it look like it's flickering.

Is there a way to add a delay/transition to a blur backdrop-filter, so that it updates less frequently?

Live example (reflection only works properly in Chrome) or GitHub project

Container element:

#window {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

Backdrop-filter element:

#sidebar {
    min-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    backdrop-filter: brightness(25%) saturate(180%) blur(30vw);
    -webkit-backdrop-filter: brightness(25%) saturate(180%) blur(30vw);
    z-index: 100;
}

Reflected element:

#destination {
    overflow: scroll;
    border: none;
    width: 100%;
    height: 100%;
    min-width: 700px;
    -webkit-box-reflect: left;
}

1 Answers1

1

Yes, you can add transition: transform 0.5s ease; in the element's css. You can adjust the delay time by either increasing or decreasing the 0.5s ease (i.e. making it 1s will give it a 1-second delay).

Also, you can adjust the opacity of the backdrop-filter to achieve a somewhat same effect:

.bg {
  transition: backdrop-filter 0.2s;
  backdrop-filter: blur(4px) opacity(0);
}

.bg.show {
  backdrop-filter: blur(4px) opacity(1);
}

You may refer to this post.

Yong
  • 1,622
  • 1
  • 4
  • 29
  • Wouldn't this only apply to whatever "transform" is on the element, and not its backdrop-filter? It doesn't seem to do anything whenever I apply it to either element. I tried adding "transition: backdrop-filter 0.5s ease" to the element with the backdrop-filter, but that also didn't change anything. –  Mar 17 '21 at 09:17
  • @Thorskjold I've edited some additional solutions that might help. – Yong Mar 17 '21 at 09:27
  • Thank you! I did see this post, but I wasn't sure if it applied to my situation, since it transitions to a show-selector, and my element with the backdrop-filter is supposed to transition without a selector (if that makes any sense). I tried to edit my original post to clarify this point –  Mar 17 '21 at 09:38
  • @Thorskjold Have you tried inspecting your page? The `-webkit-backdrop-filter:` seems to have an invalid property value. Also, I did notice the flicker when I hover the cursor over the sidebar, but it no values change when the "flicker" or animation happens. Have you tried adding a `:hover` modifier? – Yong Mar 17 '21 at 10:00
  • I'm not sure what the invalid property value is, but I've now noticed that the backdrop-filter disappears (flickers) when hovering over the sidebar. The sidebar flicker I was referring to was more so when the #destination element is scrolled. I want to delay the change in the #destination reflection, so it doesn't look like flicker in the sidebar. –  Mar 17 '21 at 10:31
  • @Thorskjold I see now, the backdrop-filter that you used doesn't actually have any animation. All it does is giving a background color to your sidebar and those number combination that you've given to it only gave it opacity. Try inspecting and disabling the backdrop-filter and you'll see the reflection of the right page's content. If it's really animation that you insist then use scroll even listener. The only thing I can think of animating it is when scrolling, you should increase opacity, and decrease it when you stop scrolling. Use transition in between and you'll have decent animation. – Yong Mar 17 '21 at 11:57