Anchor position selects last fallback

by tikosar

HTML

<div class="anchor">
	I am the anchor
</div>
<div class="tooltip">I am a popover</div>

CSS

body {
  overflow: hidden;
}

.anchor {
  anchor-name: --anchor;
  background: hotpink;
  margin-top: 90vh;
}

.tooltip {
  position: absolute;
  anchor-default: --anchor;
  position-fallback: --top-then-bottom;
  height: 100vh;
  background: cyan;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: anchor(top);
    left: anchor(center);
  }

  @try {
    top: anchor(bottom);
    left: anchor(center);
  }
}