Неправильная позиция привязки при использовании параметров позиции-попробования и элемент находится в переполнении ⇐ CSS

[Anonymous]

Возьмем следующий пример:

Код: Выделить всё

const container = document.getElementById('container')

let html = ''

for (let i = 1; i < 149; i++) {
html += `
${i}


Lorem ipsum dolor sit amet, consectetur adipisicing elit.
A adipisci aliquam asperiores at aut beatae corporis,
cupiditate ea eaque error hic maxime.

`
}

container.innerHTML = html

Код: Выделить всё

#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;
}

Код: Выделить всё

Примечание. Эта проблема зависит от размера экрана.Если в предварительном просмотре нажать «1», всплывающая подсказка отобразится справа и спустится вниз.
[img]https://i .sstatic.net/vQkFkdo7.png[/img]

Если щелкнуть всплывающую подсказку в крайнем правом и нижнем углу страницы без прокрутки (например, 14 при использовании размера предварительного просмотра по умолчанию), всплывающая подсказка перемещается влево и вверх.


Если вы затем прокрутите страницу вниз и, например, нажмете 38, всплывающая подсказка переместится вверх, хотя внизу есть место. Все всплывающие подсказки ниже сгиба (для просмотра требуется прокрутка) перемещаются вверх независимо от того, где они расположены на странице.


Я ожидал, что эта всплывающая подсказка будет двигаться вниз. Это ошибка, намеренное поведение или я неправильно понял, как работают позиции-try-options?

Подробнее здесь: https://stackoverflow.com/questions/785 ... -is-in-the