Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add warning when parent styles break next/image #28221

Merged
merged 3 commits into from Aug 18, 2021

Conversation

styfle
Copy link
Member

@styfle styfle commented Aug 17, 2021

Fixes #27644

@styfle styfle requested a review from atcastle Aug 17, 2021
@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Aug 17, 2021
@ijjk

This comment has been minimized.

@styfle styfle changed the title Add warning when parent styles will break next/image Add warning when parent styles break next/image Aug 17, 2021
@ijjk
Copy link
Member

ijjk commented Aug 17, 2021

Failing test suites

Commit: 76ed6cd

test/integration/image-component/default/test/index.test.js

  • Image Component Tests > dev mode > should warn when img with layout=fill is inside a container without position relative
Expand output

● Image Component Tests › dev mode › should warn when img with layout=fill is inside a container without position relative

expect(received).toMatch(expected)

Expected pattern: /Image with src (.*)jpg(.*) may not render properly with a parent using position:\"static\". Consider changing the parent style to position:\"relative\"/gm
Received string:  ""

  605 |         .join('\n')
  606 |       expect(await hasRedbox(browser)).toBe(false)
> 607 |       expect(warnings).toMatch(
      |                        ^
  608 |         /Image with src (.*)jpg(.*) may not render properly with a parent using position:\"static\". Consider changing the parent style to position:\"relative\"/gm
  609 |       )
  610 |     })

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:607:24)

@ijjk

This comment has been minimized.

ijjk
ijjk approved these changes Aug 18, 2021
@ijjk
Copy link
Member

ijjk commented Aug 18, 2021

Stats from current PR

Default Build (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
buildDuration 15.7s 16.3s ⚠️ +629ms
buildDurationCached 4.1s 4.1s ⚠️ +57ms
nodeModulesSize 61.5 MB 61.5 MB ⚠️ +2.52 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
/ failed reqs 0 0
/ total time (seconds) 3.104 3.101 0
/ avg req/sec 805.39 806.31 +0.92
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.933 1.97 ⚠️ +0.04
/error-in-render avg req/sec 1293.31 1268.84 ⚠️ -24.47
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
745.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.2 kB 42.2 kB
main-HASH.js gzip 23.2 kB 23.2 kB
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 67.1 kB 67.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
polyfills-a4..dd70.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
_app-HASH.js gzip 979 B 979 B
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 312 B 312 B
css-HASH.js gzip 329 B 329 B
dynamic-HASH.js gzip 2.67 kB 2.67 kB
head-HASH.js gzip 351 B 351 B
hooks-HASH.js gzip 918 B 918 B
image-HASH.js gzip 4.13 kB 4.14 kB ⚠️ +4 B
index-HASH.js gzip 261 B 261 B
link-HASH.js gzip 1.66 kB 1.66 kB
routerDirect..HASH.js gzip 318 B 318 B
script-HASH.js gzip 387 B 387 B
withRouter-HASH.js gzip 320 B 320 B
bb14e60e810b..30f.css gzip 125 B 125 B
Overall change 13 kB 13 kB ⚠️ +4 B
Client Build Manifests
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
_buildManifest.js gzip 492 B 492 B
Overall change 492 B 492 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
index.html gzip 539 B 539 B
link.html gzip 551 B 551 B
withRouter.html gzip 532 B 532 B
Overall change 1.62 kB 1.62 kB

Diffs

Diff for _buildManifest.js
@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-d386c05297cfdcd36f03.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-39552dae3d3053484035.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-1681da386f618d2e4e49.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f62bdaa581311495bb85.js"],
   "/routerDirect": [
Diff for image-HASH.js
@@ -322,7 +322,7 @@
       } // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
 
-      function handleLoading(img, src, placeholder, onLoadingComplete) {
+      function handleLoading(img, src, layout, placeholder, onLoadingComplete) {
         if (!img) {
           return;
         }
@@ -349,6 +349,10 @@
                   naturalHeight: naturalHeight
                 });
               }
+
+              if (false) {
+                var parent, ref, ref1;
+              }
             });
           }
         };
@@ -670,7 +674,13 @@
               className: className,
               ref: function ref(img) {
                 setRef(img);
-                handleLoading(img, srcString, placeholder, onLoadingComplete);
+                handleLoading(
+                  img,
+                  srcString,
+                  layout,
+                  placeholder,
+                  onLoadingComplete
+                );
               },
               style: _objectSpread({}, imgStyle, blurStyle)
             })

Webpack 4 Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
buildDuration 13.2s 13.6s ⚠️ +325ms
buildDurationCached 5.6s 5.6s -51ms
nodeModulesSize 61.5 MB 61.5 MB ⚠️ +2.52 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
/ failed reqs 0 0
/ total time (seconds) 3.04 3.062 ⚠️ +0.02
/ avg req/sec 822.33 816.33 ⚠️ -6
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.797 1.844 ⚠️ +0.05
/error-in-render avg req/sec 1391.5 1355.6 ⚠️ -35.9
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
16.HASH.js gzip 186 B 186 B
677f882d2ed8..HASH.js gzip 14.1 kB 14.1 kB
framework.HASH.js gzip 41.9 kB 41.9 kB
main-HASH.js gzip 10.6 kB 10.6 kB
webpack-HASH.js gzip 1.19 kB 1.19 kB
Overall change 68 kB 68 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
polyfills-a4..dd70.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
_app-HASH.js gzip 964 B 964 B
_error-HASH.js gzip 3.8 kB 3.8 kB
amp-HASH.js gzip 552 B 552 B
css-HASH.js gzip 333 B 333 B
dynamic-HASH.js gzip 2.87 kB 2.87 kB
head-HASH.js gzip 3.06 kB 3.06 kB
hooks-HASH.js gzip 924 B 924 B
index-HASH.js gzip 231 B 231 B
link-HASH.js gzip 1.64 kB 1.64 kB
routerDirect..HASH.js gzip 298 B 298 B
script-HASH.js gzip 2.98 kB 2.98 kB
withRouter-HASH.js gzip 295 B 295 B
30809af5c834..565.css gzip 125 B 125 B
Overall change 18.1 kB 18.1 kB
Client Build Manifests
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
_buildManifest.js gzip 500 B 500 B
Overall change 500 B 500 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js next-image-add-warning-parent-element Change
index.html gzip 585 B 585 B
link.html gzip 597 B 597 B
withRouter.html gzip 578 B 578 B
Overall change 1.76 kB 1.76 kB
Commit: 10edc8e

@kodiakhq kodiakhq bot merged commit ce18756 into canary Aug 18, 2021
29 of 32 checks passed
@kodiakhq kodiakhq bot deleted the next-image-add-warning-parent-element branch Aug 18, 2021
kodiakhq bot pushed a commit that referenced this pull request Aug 26, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The responsive layout is incompatible with a Flexbox container
2 participants