Прекратите мигание баннера нестильным, сделайте целые карточки кликабельными

Fixkamo-marketing
Порезанный
19 августа 2026 г. в 03:43 UTC
Автор
Kamo
Обещать
646db37

PREVIEW BANNER — его CSS жил в блоке <style jsx> внутри компонента. В App Router styled-jsx не сервер-рендер CSS для клиентских компонентов, Таким образом, SSR HTML отправил разметку баннера (это первый элемент в <body>). с именами классов, не соответствующими таблице стилей, и тег <style> появился только один раз Пакет JS пробежал. Подтверждено против производства: нулевой ряд <style> блоков в HTML, и ни одно из правил в пакете CSS. Правила меняются к globals.css, который представляет собой блокировку рендеринга в <head>, поэтому они применяются На первой краске. Знамя - это положение: фиксировано, а его высота была зарезервирована только эффектом. Написание document.body.style.paddingTop, так что контент сидел под ним до тех пор, пока он не появился. гидратацию, а затем прыгнул. "body {padding-top: var(--banner-h, 38px) }" now сохраняет его от первой краски; эффект все еще перезаписывает переменную Измеренная высота, которая имеет значение, где копия обертывается на маленьких экранах. FEATURE CARDS — предыдущее исправление использовало растянутый :: после по z-индексу 1, но Карты <h3> и <p> несут "относительный z-10". Они рисовали над накладкой и Проглотил щелчок по большей части карты, так что она была мертва везде. Это имело значение. Вместо эскалации z-индекса против контента, который законно Нужно сидеть над слоями нависания, якорь теперь заворачивает всю карту. Это является правильной семантикой для карты, которая перемещается в целом и дает ее остановка вкладки вместо двух; внутренняя «Узнать больше» возвращается к простой разметке, поскольку Ссылка внутри ссылки недействительна.

Все изменения

Как вы видите судоходство?

Каждое из этих обновлений автоматически попадает в ваше рабочее пространство. Начните бесплатно и смотрите, как он растет неделю за неделей.

Начните бесплатно навсегдаПосмотреть цены