next/future/image parent position warning

[filip-kis-fsc]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.1
  npm: 8.1.2
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Microsoft Edge Version 105.0.1343.42 (Official build) (arm64)

How are you deploying your application? (if relevant)

Not relevant.

Describe the Bug

The issue is a false positive console warning:

Image with src "/_next/static/media/test-image.d677443e.jpg" has "fill" and parent element with invalid "position". Provided "" should be one of absolute,fixed,relative.

This can be observed in repro example where the image has the fill attribute and parent position is relative.

The culprit of this issue seems to be L284 of the following snippet: https://github.com/vercel/next.js/blob/2b9afcfea3ce1f43833da26324b88693f2b11c8c/packages/next/client/future/image.tsx#L283-L293

Window.getComputedStyle returns an empty CSSStyleDeclaration in case the inspected element is not in the DOM tree.

A potential fix for this would be to add an additional check for img.parentElement actually being in the DOM tree on L283.

Expected Behavior

The false positive console warning should not appear.

Link to reproduction

https://github.com/filip-kis-fsc/nextjs-future-image-parent-position-issue

To Reproduce

1. clone repo
2. cd project root
3. yarn
4. yarn dev
5. open dev tools console tab
6. refresh the page
7. observe the false positive warning in the browser dev tools console

[SukkaW]

This sounds like a very tricky race condition.

Those checks are executed during onLoad. The only way to trigger this issue is to unmount the component's parent right before the onLoad fires, which in most cases will not happen.

Even the provided reproduction is not guaranteed to trigger the issue (useEffect might be delayed and fire after image onLoad).

[filip-kis-fsc]

An example where this issue is prominent is an image rich page where images are rendered within virtualised lists.

In such pages, virtualised list rendered items length will usually differ between SSR and CSR, which can lead to unmount of images as soon as react hydration happens.

This can lead to a lot of false positive warnings which pollute the console.

[laclance]

I also get this warning.

SplashScreen.tsx

function SplashScreen() {
  return (
    <div className="relative h-screen w-screen">
      <Image src="/img/bg-sign-in.jpg" alt="TallOrder" fill sizes="100vw, 100vh" />
    </div>
  );
}

_App.tsx

  if (!ready || !showChild || typeof window === 'undefined') {
    return <SplashScreen />;
  }

[laclance]

and this Image with src "/img/logo-dark.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

    <NoSsr>
      <Image className='select-none' width={width || 194} height={height || 80} src="/img/logo-dark.png" alt="TallOrder" priority />
    </NoSsr>

[gtonussi]

I also have this issue using Chrome, when the parent div is certainly 'position: relative'

[laclance]

adding style fixed it for me

      style={{
        width: width || 194,
        height: height || 80
      }}

[blackMoja]

I'm also experiencing console warning in the same way.

Is there a solution related to the above issue? 👀 The same symptoms are occurring in the following situations.

<DownLoad>
  <Image src={link.img} alt={link.alt} loader={imageLoader} width={26} height={20} />
</DownLoad>

[laclance]

The warning also seemed to be happening intermittently, but after adding style={{position: 'relative'}} to my Image component's parent div instead of a className I have not seen the warning again. EDIT - warning appeared again

[viclafouch]

I have the exact same issue.

AND

I have the same with this warning too : Image with src "the-image.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

<Image width={20} height={20} src={src} />

Very boring :(

[imtiazpy]

Having the issue: Image with src "/Hero-triangle.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

even though I haven't used any CSS.

<Image priority src="/Hero-triangle.png" alt="consistency content engagement" width={600} height={600} />

Can anybody tell me, how to get rid of this warning ?

[alicercedigital]

I have the same issue:

Image with src "/icons/arrow-down.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

I"m not using any class/styles or sizes

[damyco]

Having the same issue, started up a new project and trying to put SVG logo in my navbar, nothing fancy:

<Image src="/logo.svg" alt="Logo" width={192} height={33} />

Image with src "/logo.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

[i6mi6]

Interestingly I got the warning when passing float values to width and/or height

[nixjs]

You can try:

img: {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

[abdessamadely]

For me, it's happening cause I'm giving it a fixed width with a float number

So img.height returns 97 but img.getAttribute("height") returns `97.19999999999999'

I'm not sure if I should change my aspect ratio to be 97 or if this case should be handled by using Math.round on both

Math.round(img.height.toString()) !== Math.round(img.getAttribute("height"))

[adiletelf]

Solved by adding style prop:

<Image src={src} width={36} height={36} style={{ width: 36, height: 36 }} />

[ryarturogi]

This actually resolved the issue.

Can anyone explain why we need to set width and height to auto on the style attribute?

<Image height={22.5} src="/logo.svg" style={{ width: 'auto', height: 'auto' }} width={82} />

Warning:

Image with src "/logo.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

[amritkv]

Actually putting integer values instead of float, removes the console warning.

From : <Image src={logo} height={57} width={147.44} alt="Logo" />

To : <Image src={logo} height={57} width={147} alt="Logo" />

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.