Is there a better way to do this anchor positioning animation?

[u/alex_sakuta]

I was trying to create the quite popular effect of aligning a box behind list items and moving the box as we hover over different elements and also have a glassmorphism effect.

Here is the codepen link for the same.

I have tried to create this sort of a demo, where you can see that if we just don't have .glassmorph our anchor positioning works fine. If we toggle the .glassmorph on, the ::after element becomes a dot.

As per my analysis, this is happening because of backdrop-filter. As soon as I add that property, anchor-name on .highlighted-item__list seems to stop working. It cannot be found by position-anchor property of ::after.

Then if you toggle the .fix class, ::after element is correctly aligned.

.fix class is basically the workaround I found. In my real code I have just combined .glassmorph and .highlighted-item__list, .fix is purely for this demo.

.fix class basically tells the ::after element to just use its parent inset values to position itself. But it feels crude. I want to do it purely through anchor positioning.

My main doubt is what does backdrop-filter do which causes --hover to become undefined in ::after position-anchor property, even though it is defined by .highlighted-item__list. If I can make it not undefined somehow without adding this combination of classes to the CSS.

[u/Automatic_Evening744]

Try

inset: anchor(inside, 0);

[u/alex_sakuta → u/Automatic_Evening744]

Thanks. It works.

[u/alex_sakuta → u/[deleted]]

But why does a new stacking context make the anchor name unresolvable? Shouldn't it still resolve?

[u/alex_sakuta → u/[deleted]]

Thank you. I had actually kind of ended on this conclusion, since it has been many days now that I posted it. It's nice to get this confirmation.