backdrop-blur causes jagged corners

Yesterday I saw this effect in follow, and upon closer inspection, I found that the two rounded corners of the lower floating layer revealed part of the background image.#

Thoughts#

My first reaction was that the pixel mismatch was caused by the rendering of the rounded corners.
I tried to write an example to reproduce this issue.

However, I tried different sizes of rounded corners and images, but I could not reproduce the issue.
I attempted to check the styles that might be causing the problem.

When I tried switching the backdrop-blur, I found that the issue disappeared, so the problem was caused by the calculation of the backdrop-blur property.

Solution#

I tried to split this property into the inner element.

        <div className="absolute bottom-0 w-full text-center rounded-b-sm overflow-hidden duration-500 opacity-0 group-hover:opacity-100">
          <div className="z--1 absolute  top-0 left-0 size-full bg-white/50 dark:bg-neutral-900/70"></div>
          <div className="text-[13px] backdrop-blur-none group-hover:backdrop-blur-sm " >
           text
          </div>
        </div>

As you can see, if the transition animation is applied to the entire element, the backdrop-blur effect will only take place after the overall rendering is complete.

So we changed the method and applied the transition animation to the inner background element and the blur element.


        <div className="absolute bottom-0 w-full text-center rounded-b-sm overflow-hidden duration-500">
          <div className="z--1 absolute  top-0 left-0 size-full bg-white/50 dark:bg-neutral-900/70 opacity-0 group-hover:opacity-100"></div>
          <div className="text-[13px] backdrop-blur-none group-hover:backdrop-blur-sm opacity-0 group-hover:opacity-100" >
            text
          </div>
        </div>

Let's take a look at the effect.

meanc