Next.js Image Component Overlapping with CSS Transformations on Scroll
I can't seem to get I'm experiencing a strange scenario with the Next.js Image component where images seem to overlap with other elements when I apply CSS transformations on scroll... Specifically, I have a parallax effect set up using `transform: translateY()` for a section of my page and when I scroll, the images render incorrectly, appearing above other content rather than staying in their designated areas. I've tried using `layout='responsive'` and `objectFit='cover'` on the Image component, but it doesn't seem to resolve the scenario. Here's a simplified version of my code: ```jsx import Image from 'next/image'; const ParallaxSection = () => { return ( <div className='parallax'> <Image src='/path/to/image.jpg' alt='Parallax Image' layout='responsive' width={700} height={500} objectFit='cover' /> <div className='content'> <h1>Some Content Here</h1> </div> </div> ); }; ``` And my CSS looks something like this: ```css .parallax { height: 500px; overflow: hidden; position: relative; transform: translateY(0); /* This changes on scroll */ } .parallax img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } ``` On scroll, the image overlaps the text instead of properly adhering to the layout. I’ve also tried changing the z-index and using `position: relative` on the surrounding div, but the behavior continues. I suspect it might be related to the `position: absolute` on the image, but I need to find a solution that maintains the responsive behavior I need. Is there a recommended approach to ensure the Image component plays nicely with CSS transformations like this? I've been using Javascript for about a year now.