Fix `next/image` when parent is `<p>` #30041

styfle · 2021-10-18T18:31:39Z

ijjk

Thanks! 💯

ijjk · 2021-10-18T21:04:28Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
buildDuration	12.5s	12.6s	⚠️ +51ms
buildDurationCached	3s	3s	-25ms
nodeModulesSize	195 MB	195 MB	⚠️ +2 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.83	2.821	-0.01
/ avg req/sec	883.52	886.2	+2.68
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.344	1.357	⚠️ +0.01
/error-in-render avg req/sec	1860.56	1841.68	⚠️ -18.88

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
558.HASH.js gzip	3.02 kB	3.02 kB	✓
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	25 kB	25 kB	✓
webpack-HASH.js gzip	1.49 kB	1.49 kB	✓
Overall change	71.9 kB	71.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	3.11 kB	3.11 kB	✓
amp-HASH.js gzip	553 B	553 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.73 kB	2.73 kB	✓
head-HASH.js gzip	2.37 kB	2.37 kB	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	5.86 kB	5.85 kB	-5 B
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	19.9 kB	19.9 kB	-5 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
_buildManifest.js gzip	490 B	493 B	⚠️ +3 B
Overall change	490 B	493 B	⚠️ +3 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
index.html gzip	538 B	538 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-c1f9675770bff0c63be8.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-3a3f2ee26479962d56c1.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-7cc4d3d2842a5b0a7bea.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-962a2a330709d57cd073.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -665,8 +665,8 @@
               margin: 0
             };
             sizerStyle = {
-              boxSizing: "border-box",
               display: "block",
+              boxSizing: "border-box",
               maxWidth: "100%"
             };
             sizerSvg = '<svg width="'
@@ -678,9 +678,9 @@
           } else if (layout === "fixed") {
             // <Image src="i.png" width="100" height="100" layout="fixed" />
             wrapperStyle = {
+              display: "inline-block",
               overflow: "hidden",
               boxSizing: "border-box",
-              display: "inline-block",
               position: "relative",
               width: widthInt,
               height: heightInt
@@ -712,13 +712,13 @@
 
         var srcString = src;
         return /*#__PURE__*/ _react["default"].createElement(
-          "div",
+          "span",
           {
             style: wrapperStyle
           },
           sizerStyle
             ? /*#__PURE__*/ _react["default"].createElement(
-                "div",
+                "span",
                 {
                   style: sizerStyle
                 },

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
buildDuration	6.1s	6.1s	⚠️ +36ms
buildDurationCached	3.1s	2.9s	-180ms
nodeModulesSize	195 MB	195 MB	⚠️ +2 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.899	2.838	-0.06
/ avg req/sec	862.51	880.89	+18.38
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.323	1.307	-0.02
/error-in-render avg req/sec	1890.24	1913.49	+23.25

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
675-HASH.js gzip	13.8 kB	13.8 kB	-5 B
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.8 kB	50.8 kB	✓
main-HASH.js gzip	35.2 kB	35.2 kB	✓
webpack-HASH.js gzip	1.64 kB	1.64 kB	✓
Overall change	102 kB	102 kB	-5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	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 change-image-wrapper-div-to-span	Change
_app-HASH.js gzip	1.33 kB	1.33 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.79 kB	2.79 kB	✓
head-HASH.js gzip	355 B	355 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	555 B	555 B	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.22 kB	2.22 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
_buildManifest.js gzip	510 B	511 B	⚠️ +1 B
Overall change	510 B	511 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js change-image-wrapper-div-to-span	Change
index.html gzip	538 B	538 B	✓
link.html gzip	551 B	551 B	✓
withRouter.html gzip	533 B	533 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-7fa8f6299881aeef4d92.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002F675-9c6edfe56b83ffcb92d8.js",
+    "static\u002Fchunks\u002F675-19451754ba415698ed27.js",
     "static\u002Fchunks\u002Fpages\u002Fimage-24dfc0766459a85ca885.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-d5bdd3af9bbbd881abda.js"],

Diff for 675-HASH.js

@@ -2859,8 +2859,8 @@
               margin: 0
             };
             sizerStyle = {
-              boxSizing: "border-box",
               display: "block",
+              boxSizing: "border-box",
               maxWidth: "100%"
             };
             sizerSvg = '<svg width="'
@@ -2872,9 +2872,9 @@
           } else if (layout === "fixed") {
             // <Image src="i.png" width="100" height="100" layout="fixed" />
             wrapperStyle = {
+              display: "inline-block",
               overflow: "hidden",
               boxSizing: "border-box",
-              display: "inline-block",
               position: "relative",
               width: widthInt,
               height: heightInt
@@ -2903,13 +2903,13 @@
         }
         var srcString = src;
         return /*#__PURE__*/ _react.default.createElement(
-          "div",
+          "span",
           {
             style: wrapperStyle
           },
           sizerStyle
             ? /*#__PURE__*/ _react.default.createElement(
-                "div",
+                "span",
                 {
                   style: sizerStyle
                 },

Commit: 22d4cea

As a follow up to #30041 which changed `<div>` to `<span>`, this PR makes sure that unexpected styles are not applied to the image wrapper or sizer spans. For example: `.content span {}` would apply to all spans and incorrectly style the image wrapper. This PR adds [`all: initial`](https://developer.mozilla.org/en-US/docs/Web/CSS/all) to effectively reset the span styles.

styfle added 3 commits October 18, 2021 14:21

Fix next/image when parent is <p>

9f1dc46

Fix image component

33faae9

Update documentation

4403400

styfle requested a review from atcastle October 18, 2021 18:31

styfle requested review from huozhi, ijjk, leerob, lfades, molebox, padmaia, shuding and timneutkens as code owners October 18, 2021 18:31

ijjk added created-by: Next.js team PRs by the Next.js team. type: documentation type: next labels Oct 18, 2021

This comment has been minimized.

Sign in to view

Merge branch 'canary' into change-image-wrapper-div-to-span

7920aee

This comment has been minimized.

Sign in to view

ijjk approved these changes Oct 18, 2021

View reviewed changes

Merge branch 'canary' into change-image-wrapper-div-to-span

b54aedb

This comment has been minimized.

Sign in to view

Merge branch 'canary' into change-image-wrapper-div-to-span

22d4cea

kodiakhq bot merged commit 1a0c1e8 into canary Oct 18, 2021

kodiakhq bot deleted the change-image-wrapper-div-to-span branch October 18, 2021 21:29

styfle added the hacktoberfest-accepted label Oct 19, 2021

styfle mentioned this pull request Oct 19, 2021

Prevent inherited styles on next/image wrapper or sizer #30064

Merged

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `next/image` when parent is `<p>` #30041

Fix `next/image` when parent is `<p>` #30041

styfle commented Oct 18, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk left a comment •

edited

Loading

This comment has been minimized.

ijjk commented Oct 18, 2021

Diffs

Diffs

Fix next/image when parent is <p> #30041

Fix next/image when parent is <p> #30041

Conversation

styfle commented Oct 18, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk left a comment • edited Loading

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Oct 18, 2021

Stats from current PR

Diffs

Diffs

Fix `next/image` when parent is `<p>` #30041

Fix `next/image` when parent is `<p>` #30041

ijjk left a comment •

edited

Loading