I’m building a menu component. The menu component consists of an auto-layout container, with a stroke, and a series of nested menu items.
The menu items each have a hover state, which outlines them with their own stroke, and sometimes applies a fill.
Strangely, when a fill is applied to a menu item, it will often cover up the stroke of the container, as if it were on a lower layer. In other words, a menu item highlighted blue will bleed to the very edges of the container and visually cross/break the border.
However, when a stroke is applied to a menu item, the container’s stroke will completely eclipse it. In other words, when an item is supposed to be enclosed on all sides by a colored stroke, the stroke will only be visible on the top and bottom edges of the item - or just the bottom edge, if the item’s at the top, and vice versa - due to the container’s stroke overlapping it.
Both of these behaviors are the opposite of the desired outcome. And, strangely enough, occasionally, Figma seems to switch these behaviors around on a whim. Sometimes, after some fidgeting and control+z-ing, the desired behavior will occur. I have no idea what I do to cause this.
Is there something I’m missing here?
