next/future/image parent position warning

Verify canary release

• 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

[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’