demo · v148

Layer Boundary

Click the outer button to open a dialog. Hover the button inside the dialog — the outer button's :hover state stays off in Chrome 148+. Before, it would light up too.

outer button :hover: —

Hover the button below. Watch the outer "Open dialog" button on the page — does its :hover styling kick in?

the rule

Before v148: opening the dialog placed it in the top layer, but the flat-tree ancestor chain still considered descendants of the dialog as descendants of the opener. So :hover on the inner button propagated back to the outer button.

After v148: the top-layer boundary is opaque to :hover, :active, and :focus-within. The inner button is hovered; the outer button is not.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗