From cd808b482dc14f9fec789a7b75f4e5b973367ae8 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Fri, 18 Feb 2022 11:20:42 -0500
Subject: [PATCH] Fix `next/image` incorrectly warning for `position: absolute`
 parent

---
 packages/next/client/image.tsx                                | 3 ++-
 .../default/pages/layout-fill-inside-nonrelative.js           | 4 ++++
 test/integration/image-component/default/test/index.test.js   | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 2bc5f9ed8cb1f60..c16b26a056785f9 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -280,7 +280,8 @@ function handleLoading(
             } else if (
               layout === 'fill' &&
               parent.position !== 'relative' &&
-              parent.position !== 'fixed'
+              parent.position !== 'fixed' &&
+              parent.position !== 'absolute'
             ) {
               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
index 855c370058feffb..2c831a789e8954e 100644
--- a/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js
+++ b/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js
@@ -2,6 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import jpg from '../public/test.jpg'
 import png from '../public/test.png'
+import avif from '../public/test.avif'
 import webp from '../public/test.webp'
 
 const Page = () => {
@@ -14,6 +15,9 @@ const Page = () => {
       <div style={{ position: 'fixed', width: '200px', height: '200px' }}>
         <Image id="fixed" layout="fill" priority src={png} />
       </div>
+      <div style={{ position: 'absolute', width: '200px', height: '200px' }}>
+        <Image id="absolute" layout="fill" priority src={avif} />
+      </div>
       <div style={{ position: 'relative', width: '200px', height: '200px' }}>
         <Image id="relative" layout="fill" priority src={webp} />
       </div>
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 7d406b9e633597a..2821fe553d6c00e 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -669,6 +669,9 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /Image with src (.*)png(.*) may not render properly/gm
       )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)avif(.*) may not render properly/gm
+      )
       expect(warnings).not.toMatch(
         /Image with src (.*)webp(.*) may not render properly/gm
       )