Given #10861, position-area uses scrollable containing block for its overflow evaluation. anchor() does not (Using the local containing block), even on using the default anchor., This leads to a visible difference in fallback/visibility behaviour when anchoring to something out of the initial viewport, but the positions at least make sense.

anchor-center OTOH, gets placed at the edge of the local containing block, due to not using scrollable overflow area + alignment safety behaviour.

Demonstrative test case here:

• There are two pink anchors, one visible in the initial viewport at the top left of the scroller, another initially-not-visible one at the bottom right.
• 3 positioned elements all try to anchor to the bottom right element:
  • Blue one using position-area,
  • Purple one using anchor(),
  • Orange one using anchor-center
• All of them have a fallback to change the default anchor to the upper left anchor.

Two workarounds exist, but things seem to behave slightly differently on Blink and WebKit:

• Using unsafe:
  • Blink: The orange element anchors to whatever is visible at the moment
  • WebKit: The orange element anchors to the lower right anchor
• Using the span-all trick as described in [css-align][css-position][css-anchor-position] Introduce "document containing block" for some purposes? #10861:
  • Blink: Unpredictable? Initially anchors to the upper left anchor - upon scrolling to lower right, it moves to the lower right anchor, but anchors in the lower right corner of the anchor, instead of its center. Upon scrolling back to upper left, it gets stuck in an intermediate position.
  • WebKit: The orange element anchors to the lower right anchor