Too many next/image warning/s for non relative positioned parents

[timfuhrmann]

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

17.2.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

It's probably not a bug, but after updating our projects we're experiencing a huge load of warnings due to the absolute parent's positioning:

Image with src "..." may not render properly with a parent using position:"absolute". Consider changing the parent style to position:"relative" with a width and height.

Working with sliders or on a modern project in general, the console gets spammed/loaded pretty fast, reducing visibility of intended logging.

Expected Behavior

No warning or at least not one warning for every single image.

To Reproduce

What's the issue about using absolute positioning in combination with layout fill in the first place? In this specific case we used it for slider items to contain aspect ratio and haven't experienced any issues yet:

const SlideWrapper = styled.div`
    position: relative;

    &::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
`;

const ImageWrapper = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
`;

export const Slide: React.FC = () => {
    return (
        <SlideWrapper>
            <ImageWrapper>
                <Image src="/some/src" layout="fill" objectFit="cover" />
            </ImageWrapper>
        </SlideWrapper>
    );
};

[castellanosje]

I'm having the same problem, I'm using MUI, I've set to a Box component a class using makeStyles to declare the position relative, but it seems that it takes some time for material to add the class and the css. In my case the warning says:
"Image with src "http: ..." may not render properly with a parent using position:"". Consider changing the parent style to position:"relative" with a width and height."

[timfuhrmann]

This is really annoying 😄

[justlevine]

Related: #31340

[williamhzo]

hey, the workaround i found to this issue was to wrap the <Image /> tag in another parent div with position: relative, it removed the warning in my case.

see code below (inline-styles for demo-purpose) ⬇️

warning:

<div style={{ position: 'absolute', top: '0', left: '0' }}>
  <Image src={imageSrc} layout="fill" />
</div>

no warning:

<div style={{ position: 'absolute', top: '0', left: '0' }}>
  <div style={{ position: 'relative', width: '100%', height: '100%' }}>
    <Image src={imageSrc} layout="fill" />
  </div>
</div>

hope this helps!

[styfle]

Thanks for the feedback!

We just released a couple fixes on the canary channel in v12.1.1-canary.1.

You can try it out today with npm install next@canary or yarn add next@canary.