backdrop-blur causes rounded corner jaggedness

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 rendering of the rounded corners caused a pixel mismatch issue.
I tried to write an example to reproduce this problem.

However, I tried different sizes of rounded corners and images, but I couldn't reproduce this issue.
I tried to check the styles that might be causing the problem.

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

Solution#

I tried to split this property into the internal elements.

        <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, then 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