iOS Menu

One of my favorite parts from the dropdown menus in iOS 16. Expanding nested items directly in place makes it understandable and ergonomic. This implementation uses clip-path to reveal the items and transform on the parent is reversed with transform: calc(1 / var(--transform)) on the child.

A cool trick here is that the backdrop is tinted gray, so that the text and background are dimmed at different rates. You’ll notice that the text appears to “dim” a lot more than the background does.

Bugs: weird border flicker when expanding, Safari has subpixel jitter when animating font-variation-settings weight, Firefox backdrop broken while lacking :has.