I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated:
- Framer-motion for smooth page transitions
- Gsap for easy animations
One issue I encountered was when setting images like this:
<Link>
<div className={`figureContainer ${styles.figureContainer}>
<Image layout="fill" objectFit="contain" src={lockIcon} alt="scx figure" priority={index === 0? true : false } />
<div className={styles.menuTitle}>{item}</div>
</div>
</Link>
and having a base style set in the CSS for the figure container class:
.figureContainer{
width: 50%;
height: 100%;
position: relative;
transition: filter 0.4s;
}
Upon testing my site locally, everything seemed fine. However, upon deploying it to Vercel and navigating to a different route, I noticed that the images suddenly jumped to fill the screen. It appeared as if the image was positioned absolutely and the body relatively without any other parent elements being tentatively set as relative.
This unexpected behavior only occurred when changing routes on the deployed app at: . Why is this happening and how can it be resolved?