Заголовок мобильного устройства слегка прокручивается вверх, а затем фиксируется, а не остается наверху: 0 ⇐ CSS

[Anonymous]

Написали собственный компонент под названием MobileHeader следующим образом:

"использовать клиент"; импортировать логотип из «../../../public/logo.svg» импортировать изображение из «следующего/изображения» импортировать { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTrigger } из '../ui/drawer' импортировать { HamburgerMenuIcon, Cross2Icon } из '@radix-ui/react-icons' импортировать ссылку из «следующий/ссылка» импортировать заголовок из './Heading'; импортировать контент из «./Content»; интерфейс HeaderMobileProps { Имя класса?: строка; } const HeaderMobile = ({ className }: HeaderMobileProps) => { возвращаться ( [*]Логотип Функции Цены О нас ) } экспортировать HeaderMobile по умолчанию Я использую компонент пользовательского интерфейса ShadCn — Drawer, а именно:

"использовать клиент" импортировать * как React из «реагировать» импортировать { Drawer as DrawerPrimitive } из "vaul" импортировать { cn } из "@/lib/utils" const Ящик = ({ долженScaleBackground = правда, ...реквизит }: React.ComponentProps) => ( ) Drawer.displayName = "Ящик" const DrawerTrigger = DrawerPrimitive.Trigger const DrawerPortal = DrawerPrimitive.Portal const DrawerClose = DrawerPrimitive.Close const DrawerOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName const DrawerContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, Children, ...props }, ref) => ( {дети} )) DrawerContent.displayName = "Содержимое ящика" const DrawerHeader = ({ имя класса, ...реквизит }: React.HTMLAttributes) => ( ) DrawerHeader.displayName = "Заголовок ящика" const DrawerFooter = ({ имя класса, ...реквизит }: React.HTMLAttributes) => ( ) DrawerFooter.displayName = "DrawerFooter" const DrawerTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DrawerTitle.displayName = DrawerPrimitive.Title.displayName const DrawerDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DrawerDescription.displayName = DrawerPrimitive.Description.displayName экспортировать { Ящик, ЯщикПортал, ЯщикНаложение, Ящик Триггер, ЯщикЗакрыть, Содержимое ящика, Заголовок ящика, Нижний колонтитул ящика, Название ящика, Описание ящика, } Проблема в следующем:
При загрузке страницы: Изображение 1. [*]Прокрутка страницы по оси Y: Изображение 2.
Не могу понять, почему это происходит. Заголовок мобильного телефона находится в моем макете.tsx следующим образом:
{/* */} {дети} [*]Пробывал перепрокрутку в теле текста. [*]Различная высота и отступы в мобильном заголовке. [*]Пыталась переместить заголовок в разные разделы. [*]Попробовал border-box, отступ, поле как 0 для * в global.css