使用position-try-options时，溢出元素锚点位置异常问题咨询

注意：该问题与屏幕尺寸相关。
在预览中，点击按钮“1”，tooltip会显示在右侧并向下延伸。
点击页面右下角未滚动状态下的按钮（如默认预览尺寸下的“14”），tooltip会显示在左侧并向上延伸。
若向下滚动页面后点击按钮“38”，即使下方有空间，tooltip仍会向上延伸。所有需要滚动才能看到的折叠区域下方的tooltip，无论其在页面中的位置如何，均会向上延伸。
我预期该tooltip应向下延伸，请问这是Bug、预期行为，还是我误解了position-try-options的工作机制？

复现代码 #

HTML

<div id="container"></div>

CSS

#container {
  background: #484848;
  color: #FFF;
  padding: 50px;
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
  justify-content: start;
  align-content: flex-start;
}

.trigger {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 100%;
  display: flex;
  color: #000;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  &:has(+ :popover-open) {
    background-color: #000;
    color: #FFF;
  }
}

.content {
  position: absolute;
  padding: 15px;
  font-size: 14px;
  width: 220px;
  margin: 0;
  border-radius: 12px;
  inset-area: right span-bottom;
  position-try-options: flip-block, flip-inline, flip-block flip-inline;
}

JavaScript

const container = document.getElementById('container')

let html = ''

for (let i = 1; i < 149; i++) {
  html += `<div class="tooltip">
              <button class="trigger"
                popovertarget="tooltip-${i}"
                style="anchor-name: --tooltip-${i}">${i}</button>

              <div popover id="tooltip-${i}" class="content" style="position-anchor: --tooltip-${i}">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
               A adipisci aliquam asperiores at aut beatae corporis, 
               cupiditate ea eaque error hic maxime.
              </div>
            </div>`
}

container.innerHTML = html

问题分析 #

这不是Bug，是当前锚定定位（Anchor Positioning）实现中的预期行为，核心原因和你的理解偏差点如下：

• 浏览器计算tooltip可用空间的参考系是当前视口（viewport），而非整个文档的绝对空间。当触发按钮处于需要滚动才能完全显示的区域时，浏览器会判定按钮下方的空间属于“视口外不可见区域”，因此触发position-try-options中的flip-block规则，自动向上翻转tooltip，优先保证其在当前视口内可见。
• 你对position-try-options的理解偏差在于：该属性的空间判断优先级是「当前视口内可见性」，而非元素在文档中的绝对位置，浏览器默认会避免用户需要额外滚动才能看到完整的tooltip。

调整方案 #

如果想要让tooltip优先遵循初始的向下延伸规则，即使需要滚动才能显示，可以修改position-try-options，将初始位置的优先级提高：

position-try-options: none, flip-block, flip-inline, flip-block flip-inline;

其中none代表优先使用inset-area定义的初始位置，只有当初始位置完全超出视口时，才会尝试后续的翻转规则。

内容的提问来源于stack exchange，提问作者user13929140