Relax warning for next/image parent element (#30453)

This warning was incorrectly displaying for the "background" use case demonstrated here: https://image-component.nextjs.gallery/background
vercel · Oct 27, 2021 · 3292713 · 3292713
1 parent e82958c
commit 3292713
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -283,7 +283,11 @@ function handleLoading(
               console.warn(
                 `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
               )
-            } else if (layout === 'fill' && parent.position !== 'relative') {
+            } else if (
+              layout === 'fill' &&
+              parent.position !== 'relative' &&
+              parent.position !== 'fixed'
+            ) {
               console.warn(
                 `Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`
               )

diff --git a/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js b/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js
@@ -1,12 +1,24 @@
 import React from 'react'
 import Image from 'next/image'
-import img from '../public/test.jpg'
+import jpg from '../public/test.jpg'
+import png from '../public/test.png'
+import webp from '../public/test.webp'
 
 const Page = () => {
   return (
-    <div style={{ position: 'static' }}>
-      <Image id="img" layout="fill" src={img} />
-    </div>
+    <>
+      <h1>Layout fill inside non-relative parent</h1>
+      <div style={{ position: 'static', width: '200px', height: '200px' }}>
+        <Image id="static" layout="fill" priority src={jpg} />
+      </div>
+      <div style={{ position: 'fixed', width: '200px', height: '200px' }}>
+        <Image id="fixed" layout="fill" priority src={png} />
+      </div>
+      <div style={{ position: 'relative', width: '200px', height: '200px' }}>
+        <Image id="relative" layout="fill" priority src={webp} />
+      </div>
+      <footer>footer here</footer>
+    </>
   )
 }
 

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -620,12 +620,20 @@ function runTests(mode) {
         appPort,
         '/layout-fill-inside-nonrelative'
       )
-      await browser.eval(`document.getElementById("img").scrollIntoView()`)
-      await check(async () => {
-        return (await browser.log('browser'))
-          .map((log) => log.message)
-          .join('\n')
-      }, /Image with src (.*)jpg(.*) may not render properly with a parent using position:"static". Consider changing the parent style to position:"relative"/gm)
+      await browser.eval(`document.querySelector("footer").scrollIntoView()`)
+      await waitFor(1000)
+      const warnings = (await browser.log('browser'))
+        .map((log) => log.message)
+        .join('\n')
+      expect(warnings).toMatch(
+        /Image with src (.*)jpg(.*) may not render properly with a parent using position:"static". Consider changing the parent style to position:"relative"/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)png(.*) may not render properly/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)webp(.*) may not render properly/gm
+      )
       expect(await hasRedbox(browser)).toBe(false)
     })