Только для Chrome: абсолютно позиционированная плавающая метка смещается/переполняется по-разному при нажатии на текст м ⇐ Html

[Anonymous]

Я создаю ввод с плавающей меткой, используя Tailwind/React. Плавающая метка — это абсолютно позиционированный внутри , и она использует :has(+ input:is(:focus,:not(:placeholder-shown))) для применения «плавающего» стиля, когда соседний находится в фокусе или не отображается заполнитель.
Вот минимальный воспроизводимый пример (без JS, без Tailwind):

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

Floating Label :has() Repro

.container {
position: relative;
width: 260px;
height: 48px;
border: 1px solid #999;
border-radius: 4px;
overflow: hidden;
font-family: system-ui, sans-serif;
margin: 40px;
}

.field-label {
/* I've also tried: display: block; width: 100%; height: 100%; */
}

.floating-label {
position: absolute;
padding: 12px;
cursor: text;
font-size: 16px;
line-height: 1;
user-select: none;
transition: all 0.15s ease-out;
background: rgba(255, 255, 0, 0.1); /* visualize box */

/* I've also tried explicit anchors like:
top: 12px;
inset-inline-start: 12px;
and then top: 4px; on the floating state – same issue. */
}

.floating-label:has(+ input:is(:focus, :not(:placeholder-shown))) {
font-size: 12px;
opacity: 0.65;
padding: 4px 12px;
background: rgba(0, 255, 0, 0.1); /* visualize floating state box */
}

.field-input {
width: 100%;
box-sizing: border-box;
margin: 16px 12px 4px;
border: none;
outline: none;
font-size: 16px;
background: transparent;
}





Name



Try this in Chrome and Firefox:
[list]
[*]Reload the page.
[*]Click directly on the [b]input[/b] field: the label floats.
[*]Reload again.
[*]Click directly on the text [b]"Name"[/b]: the label floats.
[/list]

Что я вижу:
В Firefox:

Поведение стабильно и выглядит «правильным» независимо от того, где я нажимаю (текст метки или ввод).

Зеленое поле с плавающей меткой немного выходит за пределы контейнера с правой стороны (около 24 пикселей), что имеет смысл, учитывая отступы и поля.
/>В Chrome:

Когда я нажимаю непосредственный ввод, поведение соответствует Firefox: переполнение только с правой стороны (~24 пикселя).

Когда я нажимаю текст метки (

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

), плавающая метка по-прежнему имеет стиль :has(...): (подтверждено в devtools), а вычисленное заполнение правильное:

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

  padding-top/bottom: 4px

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

  padding-left/right: 12px

Однако визуально поле выглядит смещенным: теперь оно выходит за пределы примерно 12 пикселей слева (видно в инструментах разработчика).

Положение родительского контейнера, отступы, границы, поля и т. д. вообще не меняются — единственная разница заключается в том, какой элемент я нажимаю, чтобы сфокусировать ввод.
Итак, CSS:

• Определенно применяется :has(+ input:is(:focus,:not(:placeholder-shown))).
• Определенно применяется ожидаемое дополнение в обоих состояниях (проверено в инструментах разработчика).
• Однако Chrome вычисляет различное горизонтальное размещение/переполнение абсолютно позиционированного диапазона в зависимости от того, происходит ли фокус при нажатии на ввод или посредством активации метки механизм.

Я также пробовал:

• Добавить явные привязки:
  

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

  top: 12px; inset-inline-start: 12px;

• И затем сверху: 4 пикселя; в плавающем состоянии.

[*]Изменение для отображения: блок; положение: относительное; ширина: 100%; height: 100%;, чтобы сделать его контейнером с четким позиционированием.

Но в Chrome я по-прежнему вижу, что, когда я напрямую щелкаю текст метки, поле плавающей метки смещается иначе (переполнение влево) по сравнению с щелчком по вводу (переполнение только вправо), в то время как Firefox остается последовательным в обоих случаях.
Мои вопросы:

• Это известный Chrome причуда/ошибка, связанная с :has(+ input:is(...)), активацией метки и абсолютно позиционированными потомками?
• Существует ли основанное на спецификациях объяснение того, почему статическая позиция или ширина абсолютного диапазона, уменьшающаяся до соответствия, может вычисляться по-разному, когда фокус активируется щелчком по тексту метки, а не по самому вводу?
• Существует ли чистый CSS способ сделать это надежным и согласованным во всех браузерах (т. е. избегать эта разница между щелчком по метке и щелчком по вводу), не прибегая к JS?

Будем признательны за любую информацию о том, что Chrome здесь делает, или о том, как структурировать этот макет плавающей метки, чтобы избежать такого поведения.

Во время написания я заметил, что удаление переполнения: скрыто в контейнере вроде как решает проблему. Поскольку Safari и Firefox по-прежнему работают корректно, мне кажется, что это всего лишь ошибка Chrome, но я не уверен.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ferently-w