Вертикальная полоса прокрутки появляется во всплывающем окне с информацией о Mabel в проекте карты памяти Vite ⇐ CSS

[Anonymous]

Я работаю над проектом карты памяти с использованием Vite и столкнулся с проблемой со всплывающим компонентом. Когда информация о Мэйбл появляется после щелчка по знаку вопроса, на короткое время появляется вертикальная полоса прокрутки, хотя включена прокрутка только на 0,1%. Это нарушает пользовательский интерфейс, делая его визуально непривлекательным.
Для справки по коду вот ссылка на репозиторий моего проекта: Deepak-Jha-2025/memory-card
Вот соответствующие компоненты:
Footer.jsx:

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

import MabelInfo from "./MabelInfo";
import Volume from "../assets/img/volume.svg?react";
import VolumeOff from "../assets/img/volume_off.svg?react";
import Music from "../assets/img/music_sign.svg?react";
import MusicOff from "../assets/img/music_off.svg?react";
import QuestionMark from "../assets/img/question_mark.svg?react";
import Cross from "../assets/img/cross.svg?react";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
import "../styles/Footer.scss";

function Footer({
isMusicPlaying,
setIsMusicPlaying,
isSoundPlaying,
setIsSoundPlaying,
playClick,
}) {

// It tracks whether the "info" (likely a help section or additional information) needs to be shown.
const [isInfoNeeded, setIsInfoNeeded] = useState(false);

return (



 {
// setIsSoundPlaying(!isSoundPlaying);
setIsSoundPlaying((prevSoundPlayingState) => !prevSoundPlayingState); // Better practice
playClick();
}}>
{isSoundPlaying
? 
: }


 {
// setIsMusicPlaying(!isMusicPlaying);
setIsMusicPlaying((prevMusicPlayingState) => !prevMusicPlayingState);
playClick();
}}>
{isMusicPlaying
? 
: }


 {
// setIsInfoNeeded(!isInfoNeeded);
setIsInfoNeeded((prevInfoNeededState) => !prevInfoNeededState);
playClick();
}}>
{isInfoNeeded
? 
: }


{isInfoNeeded &&  (

)}



);
}

export default Footer;

MabelInfo.jsx:

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

import mabelInfo from "../assets/img/mabel-info.png";
import { motion } from "framer-motion";

function MabelInfo() {
const variants = {
hidden: {
opacity: 0,
y: 100,
transition: { duration: 0.6 },
},
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.6 },
},
};

return (


Don't click on the same card twice!
Click on GRAVITY FALLS logo to go back.



);
}

export default MabelInfo;

Дополнительная информация:

• Полоса прокрутки появляется только во время анимации всплывающего окна.< /li>
  Я пробовал применять решения CSS, но не нашел решения.
• Поможет ли установка какого-либо конкретного пакета решить эту проблему?

Ниже я прикрепил снимок экрана правой половины стартовой страницы моего проекта, на котором показана полоса прокрутки.
< img alt="Проблема с полосой прокрутки во всплывающем окне компонента MabelInfo" src="https://i.sstatic.net/fzURdlt6.jpg" />
Будем очень признательны за любую информацию или рекомендации !
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/790 ... rd-project