How to Inspect and Debug CSS Anchor Positioning in Safari Web Inspector

Modern web user interfaces frequently position floating contextual components\u2014such as tooltips, dropdown menus, hover cards, and action palettes\u2014relative to specific anchor elements on the page. Historically, implementing this behavior required complex JavaScript libraries (such as Floating UI or Popper.js) computing DOM getBoundingClientRect() measurements and synchronizing them on every scroll and resize event. With the native CSS Anchor Positioning specification (supported in modern Safari and WebKit engines), the browser renders and positions elements relative to named anchors purely in CSS. To debug anchor relationships, tethering alignment, and collision fallbacks, Safari Web Inspector provides specialized inspection tools.

Understanding CSS Anchor Positioning Primitives

CSS Anchor Positioning establishes a declarative link between two distinct DOM elements, even when they do not share a common containing block:

• anchor-name: Applied to the reference element to declare a globally accessible anchor identifier (e.g., anchor-name: --nav-trigger;).
• position-anchor: Declared on the floating positioned element to bind it to the target anchor (e.g., position-anchor: --nav-trigger;).
• anchor() Function: Calculates coordinates relative to specific anchor edges (such as top: anchor(bottom); or left: anchor(center);).
• position-try-fallbacks: Defines alternative styling and position rules when the floating element would overflow the visible viewport edge.

Opening Safari Web Inspector and Finding Anchored Elements

To inspect elements utilizing anchor positioning in Safari:

1. Open Safari on macOS.
2. Enable developer tools via Safari > Settings > Advanced > Show features for web developers.
3. Right-click the floating tooltip or dropdown menu and select Inspect Element (or press Option + Command + I).
4. In the Elements DOM tree, select the floating container.

WebKit marks elements utilizing anchor positioning with an interactive anchor badge in the DOM tree, visually indicating the active linkage.

Inspecting Anchor Relationships in the Styles Panel

Select the floating element and examine the Styles sidebar. You will see the active positioning rules:

.tooltip {
  position: fixed;
  position-anchor: --help-icon;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
  margin-top: 8px;
}

Clicking on the dotted outline or badge next to --help-icon automatically scrolls and highlights the corresponding anchor element in the DOM tree, allowing you to verify that the target element exists and is rendered.

Debugging Edge Collisions and position-try-fallbacks

When an anchored element approaches the edge of the viewport (such as when scrolling near the bottom or right edge of a browser window), position-try-fallbacks instructs WebKit to reorient the element (e.g., flipping from bottom to top):

.tooltip {
  position: fixed;
  position-anchor: --help-icon;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: flip-block, flip-inline;
}

To test and debug fallback positions in Safari Web Inspector:

1. In the Styles panel, locate the position-try-fallbacks property.
2. Web Inspector provides interactive toggle buttons next to declared try options, allowing you to force a fallback state directly without scrolling the page.
3. Verify that flipping block or inline alignments does not cause overlapping text, clipped borders, or missing pointer arrows.

Diagnosing Missing Anchor Linkages

If an anchored element fails to position correctly and defaults to the top-left of the viewport (0, 0), check the following common pitfalls in Web Inspector:

• Double-Dash Syntax: Ensure anchor names begin with two hyphens (e.g., --anchor-id). Single hyphens or names without prefixes are invalid CSS dashed-idents and are rejected by WebKit.
• Display None or Visibility Hidden: If the anchor element is styled with display: none, its anchor box is removed from layout calculations, causing the dependent floating element to lose its position reference.
• Containing Block Scope: If an ancestor of the anchor has contain: strict or contain: paint, ensure the anchored element is within the accessible scope, or use top-layer popovers to bypass containing block boundaries.