[#279] Fix position-try demos and polyfill logic

[jgerigmeyer]

Resolves #279

Background

The position-try demos didn't update on scroll, and were broken in native browsers too, not just under the polyfill. Investigating in real native Chrome (150) confirmed two distinct problems:

1. Demo authoring bug (affects native). Per spec, position-try options are evaluated by checking whether the target overflows its inset-modified containing block — not the scrollport of an ancestor scroll container. Every demo target's containing block was its .scroll-container (position: relative), which also contains the anchor. So scrolling moved the anchor and target together and the target never overflowed its containing block → fallbacks never triggered, natively or otherwise. The polyfill only appeared to work because it measured overflow against the scrollport, diverging from native.

2. Polyfill inheritance leak. Properties shifted into custom properties (height, insets, margins, anchor-name, …) are all non-inherited in CSS, but custom properties inherit by default. So height: 400px on a .scroll-container leaked through --height-<uuid> into every descendant target and got stamped into every generated fallback.

Changes

• Demos (public/position-try*.css): make the position-try scroll containers position: static so each target's containing block is promoted to the surrounding .demo-elements wrapper (an ancestor outside the scroller). Now scrolling pushes the target to overflow and fallbacks trigger — natively and under the polyfill. Added overflow: clip on the wrapper so a target whose anchor has scrolled out of view doesn't float over other content, and gave the combined demo's anchor an offset so its base position fits at rest. Removed the "this example is broken" warning in index.html.

• Non-inherited custom properties (src/cascade.ts, src/dom.ts): register the shifted custom properties with CSS.registerProperty({ syntax: '*', inherits: false }) so a value set on an ancestor is no longer read back as if it were set directly on a descendant. Registration is global and runs once; it no-ops where CSS.registerProperty is unavailable. Updated the now-inaccurate inheritance comments.

• Overflow basis (src/polyfill.ts): rewrote checkOverflow to measure the target's margin-box against its containing block (offsetParent) using getBoundingClientRect, matching the spec/native behavior instead of floating-ui's scrollport-based detectOverflow. Both rects are read in viewport coordinates, so the page's scroll offset cancels out (the previous standalone detectOverflow call produced wildly wrong values once the containing block was no longer a near-viewport scroll container). Dropped the now-unused detectOverflow/MiddlewareState imports and platformWithCache.

• Test (tests/e2e/polyfill.test.ts): the target's offsetParent is now the (non-scrollable) wrapper, so the @position-fallback test scrolls .scroll-container directly and captures the pre-polyfill position rather than hardcoding it.

Behavior change to flag for review

checkOverflow now matches native semantics (overflow vs. containing block). This preserves existing behavior for the common cases — an absolutely-positioned target whose containing block is a scroll container still flips against that scroller's visible box, and a fixed target flips against the viewport — so nothing in the suite regressed. But it is a change to core polyfill logic and worth a careful look.

Verification

• Native (Chrome 150): all position-try targets now flip on scroll. The combined demo flips but non-monotonically, which is inherent to its dual-inline-axis options plus native scroll-offset compensation.
• Polyfill (Chromium 124): all five targets flip cleanly on scroll; no height: 400px leaks into generated fallbacks; no console errors.

[netlify]

✅ Deploy Preview for anchor-polyfill ready!

Name	Link
🔨 Latest commit	363ad7c
🔍 Latest deploy log	https://app.netlify.com/projects/anchor-polyfill/deploys/6a42e1248bc3ae000857fca1
😎 Deploy Preview	https://deploy-preview-424--anchor-polyfill.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for anchor-position-wpt canceled.

Name	Link
🔨 Latest commit	363ad7c
🔍 Latest deploy log	https://app.netlify.com/projects/anchor-position-wpt/deploys/6a42e124923feb0008ef8193