lekss361/gendesign

Fork 0

липкая панель прячется, пока герой в кадре #3296

Merged

bot-backend merged 3 commits from fix/mera-sticky-after-hero into main

2026-08-31 09:28:16 +00:00

bot-backend commented

2026-08-31 09:14:03 +00:00

Collaborator

Владелец увидел на первом экране, что полоса «Проверить квартиру» лежит поверх абзаца «Мы называем реальную цену вашей квартиры».

Почему отступом не лечится

.barSpacer добавляет высоту в конец документа, а .barRoot — fixed: он накрывает нижние ~67px вьюпорта при любой прокрутке, включая scrollTop = 0. Разобравший это агент так и написал в отчёте и не стал чинить молча — правильно, потому что напрашивающееся решение здесь не работает.

Правка

Пока герой виден, панель не нужна: прямо в нём стоит та же форма проверки, и полоса дублирует призыв, закрывая текст. Уходит герой — панель появляется.

Решение, которое стоит назвать отдельно

По умолчанию панель видима. Скрытие включает только клиентский наблюдатель; если скрипт не выполнился — ошибка, старый браузер, отключённый JS — поведение остаётся ровно сегодняшним.

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

Мелочи, которые не мелочи

Убирается трансформом, а не display: none: transform идёт на композиторе и не вызывает перекладку. Страница и так дорога в отрисовке на мобильном (1824 мс в Style & Layout), и лечение перекрытия не должно стоить пересчёта макета на каждом пересечении границы героя.
Убранная панель уходит и из дерева доступности (aria-hidden + inert): иначе Tab уводит в кнопку, которой на экране нет.
rootMargin: -68px снизу — иначе панель успевала бы мигнуть на хвосте героя.
prefers-reduced-motion снимает переход.

Проверки

Тест проверяет поведение, а не наличие класса в файле: наблюдателю скармливается пересечение, и проверяется, что панель убралась и вернулась.

Фальсификация обеих сторон:

панель не прячется → expected false to be true;
панель скрыта по умолчанию → до срабатывания панель видима: expected true to be false — этот ассерт сторожит именно решение о прогрессивном улучшении.

Забавная деталь, которая заодно доказала, что aria-hidden работает: первая версия теста искала кнопку через getByRole("link") и падала — убранная панель из дерева доступности пропадает. Локатор переписан на поиск по контейнеру.

150 passed · tsc rc=0 · eslint --max-warnings 0 rc=0.

Владелец увидел на первом экране, что полоса «Проверить квартиру» лежит поверх абзаца «Мы называем реальную цену вашей квартиры». ## Почему отступом не лечится `.barSpacer` добавляет высоту в **конец документа**, а `.barRoot` — `fixed`: он накрывает нижние ~67px вьюпорта при **любой** прокрутке, включая `scrollTop = 0`. Разобравший это агент так и написал в отчёте и не стал чинить молча — правильно, потому что напрашивающееся решение здесь не работает. ## Правка Пока герой виден, панель не нужна: прямо в нём стоит та же форма проверки, и полоса дублирует призыв, закрывая текст. Уходит герой — панель появляется. ## Решение, которое стоит назвать отдельно **По умолчанию панель видима.** Скрытие включает только клиентский наблюдатель; если скрипт не выполнился — ошибка, старый браузер, отключённый JS — поведение остаётся ровно сегодняшним. Обратный порядок (по умолчанию скрыта, показывает скрипт) в тех же условиях убрал бы призыв со страницы **совсем**, то есть чинил бы вид ценой работы. Нет секции героя — наблюдать нечего, панель просто остаётся видимой, а не пропадает. ## Мелочи, которые не мелочи - Убирается **трансформом**, а не `display: none`: transform идёт на композиторе и не вызывает перекладку. Страница и так дорога в отрисовке на мобильном (1824 мс в Style & Layout), и лечение перекрытия не должно стоить пересчёта макета на каждом пересечении границы героя. - Убранная панель уходит и **из дерева доступности** (`aria-hidden` + `inert`): иначе Tab уводит в кнопку, которой на экране нет. - `rootMargin: -68px` снизу — иначе панель успевала бы мигнуть на хвосте героя. - `prefers-reduced-motion` снимает переход. ## Проверки Тест проверяет **поведение**, а не наличие класса в файле: наблюдателю скармливается пересечение, и проверяется, что панель убралась и вернулась. Фальсификация обеих сторон: - панель не прячется → `expected false to be true`; - панель скрыта по умолчанию → `до срабатывания панель видима: expected true to be false` — этот ассерт сторожит именно решение о прогрессивном улучшении. Забавная деталь, которая заодно доказала, что `aria-hidden` работает: первая версия теста искала кнопку через `getByRole("link")` и падала — убранная панель из дерева доступности пропадает. Локатор переписан на поиск по контейнеру. 150 passed · `tsc` rc=0 · `eslint --max-warnings 0` rc=0.

bot-backend added 1 commit 2026-08-31 09:14:04 +00:00

липкая панель прячется, пока герой в кадре

CI / backend-tests (pull_request) Has been skipped

Details

CI Trade-In / changes (pull_request) Successful in 10s

Details

CI Trade-In / backend-tests (pull_request) Has been skipped

Details

CI / changes (pull_request) Successful in 12s

Details

CI Trade-In / browser-tests (pull_request) Has been skipped

Details

CI / frontend-tests (pull_request) Has been skipped

Details

CI / openapi-codegen-check (pull_request) Has been skipped

Details

CI Trade-In / frontend-checks (pull_request) Successful in 1m37s

Details

47df1a9020

Владелец увидел на первом экране, что полоса «Проверить квартиру» лежит поверх
абзаца «Мы называем реальную цену вашей квартиры».

.barSpacer это НЕ лечит и не может: он добавляет высоту в КОНЕЦ документа, а
.barRoot — fixed, то есть накрывает нижние ~67px вьюпорта при ЛЮБОЙ прокрутке,
включая scrollTop=0. Разобравший это агент так и написал и не стал чинить молча.

Пока герой виден, панель не нужна: прямо в нём стоит та же форма проверки, и
полоса дублирует призыв, закрывая текст. Уходит герой — панель появляется.

ПО УМОЛЧАНИЮ ПАНЕЛЬ ВИДИМА. Скрытие включает только клиентский наблюдатель;
если скрипт не выполнился, поведение остаётся ровно сегодняшним. Обратный
порядок (скрыта, показывает скрипт) в тех же условиях убрал бы призыв со
страницы совсем — то есть чинил бы вид ценой работы. Нет секции героя —
наблюдать нечего, панель остаётся видимой, а не пропадает.

Убирается transform-ом, а не display:none: transform идёт на композиторе и не
вызывает перекладку. Страница и так дорога в отрисовке на мобильном (1824 мс в
Style & Layout), и лечение перекрытия не должно стоить пересчёта макета на
каждом пересечении границы героя.

Убранная панель уходит и из дерева доступности (aria-hidden + inert): иначе Tab
уводит в кнопку, которой на экране нет.

Тест проверяет ПОВЕДЕНИЕ, а не наличие класса в файле: наблюдателю скармливается
пересечение. Фальсификация обеих сторон — панель не прячется («expected false to
be true») и панель скрыта по умолчанию («до срабатывания панель видима»).
150 passed, eslint чисто.

bot-backend added 1 commit 2026-08-31 09:24:47 +00:00

Merge branch 'main' into fix/mera-sticky-after-hero

CI Trade-In / changes (pull_request) Successful in 10s

Details

CI Trade-In / browser-tests (pull_request) Has been skipped

Details

CI / changes (pull_request) Successful in 11s

Details

CI / backend-tests (pull_request) Has been skipped

Details

CI Trade-In / backend-tests (pull_request) Has been skipped

Details