Фликанье текста (толщины) при фокусе на ипут

Question

Столкнулся с проблемой: весь текст ниже инпута почему-то фликает, если брать инпут в фокус (если через девтулзы навешивать :focus, не воспроизводится). Видео прикладываю (весь красный текст уменьшается при фокусе инпута). Сразу пишу, что font-weight нигде вообще не аффектится никакими классами. И самое интересное, аффектится именно текст который НИЖЕ инпута, всё что выше не затрагивается.

Смотрите на красный текст ниже названия

Стэк: Tailwind, React. Ни на одном из элементов не навешаны :focus псевдоклассы, чистый css по сути, где меняется только размер текста и цвет.

Если для помощи нужны дополнительные данные, с радостью их предоставлю.

UPDATE:

Получилось углубиться в изучение и составить вот такой фрагмент кода:

<div style="background: black;">
  <p style="color: red;">Test123</p>
  <input placeholder="Введите название">
  <p style="color: red;">Test456</p>
</div>

Наглядно показывает фликинг в инпуте, который никак не связан с элементами, кажется баг хрома.

Воспроизводится только на винде, айфоны, маки, андройды - ок.

Answer 1

~~Думаю, так срабатывает коллапс марджинов или что-то такое...~~ Кажется, что-то такое с субпиксельным сдвигом, но за margin'ы зацепиться не получается.

Помогает contain со значением layout или paint:

body {
  background: black;
}

p {
  color: red;
}

input {
  contain: layout; /* это фикс */
}

<p>Test123</p>
<input placeholder="Введите название">
<p>Test456</p>

Answer 2

outline-width: 0px; на focus-visible фиксит

input:focus-visible {
  outline-width: 0;
}

<div style="background: black;">
    <p style="color: red;">Test123</p>
    <input placeholder="Введите название">
    <p style="color: red;">Test456</p>
</div>

БЛОГ НА HUSL

Фликанье текста (толщины) при фокусе на ипут

Ответы (2 шт):