v148 · css · interop

Hover & Active Demo

Open the modal dialog from each panel and then hover or click inside it. The Chrome 148 panel shows :hover and :active blocked at the top-layer boundary — the trigger button loses its hover state when the dialog opens. The Pre-148 panel simulates the bug where the trigger button stayed visually hovered.

Click "Open dialog" in each panel, then hover and click the elements inside the dialog. Watch the state monitor below each button to see whether :hover and :active propagate back to the trigger.

Chrome 148 — boundary blocks :hover and :active

:hover — not hovered

:active — not active

dialog — closed

Pre-Chrome 148 — :hover bleeds through top-layer

:hover — not hovered

:active — not active

dialog — closed

what the CSS boundary rule means

/* A button that glows on hover */
.trigger:hover {
  background: var(--text-black);
  color: var(--bg-ivory);
}

/* Chrome 148+: when dialog is open and user hovers inside it,
   :hover does NOT propagate to .trigger from the dialog's top layer.
   The button loses its hover glow as expected.

   Pre-148: :hover propagated across the top-layer boundary —
   the button stayed "hovered" while the user was in the dialog.
   Confusing, and inconsistent with Firefox and Safari. */

implementation reference

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