Fix `placeholder=blur` inside `<noscript>` #27311

styfle · 2021-07-19T22:40:50Z

We shouldn't be setting placeholder=blur styles when JS is disabled because we'll have no way to know when the image is loaded and it will be stuck in blur permanently as mentioned in this comment.

This PR avoids blur styles on the <noscript> version of the image.

ijjk · 2021-07-20T00:51:15Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
buildDuration	13.2s	13.2s	-16ms
buildDurationCached	3.1s	3s	-67ms
nodeModulesSize	49.5 MB	49.5 MB	⚠️ +101 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.141	2.12	-0.02
/ avg req/sec	1167.84	1179.39	+11.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.115	1.139	⚠️ +0.02
/error-in-render avg req/sec	2242.57	2194.56	⚠️ -48.01

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
359.HASH.js gzip	2.96 kB	2.96 kB	✓
745.HASH.js gzip	180 B	180 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	20.9 kB	20.9 kB	✓
webpack-HASH.js gzip	1.53 kB	1.53 kB	✓
Overall change	67.8 kB	67.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	554 B	554 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	2.28 kB	2.28 kB	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.6 kB	5.61 kB	⚠️ +11 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 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	19.1 kB	19.1 kB	⚠️ +11 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
_buildManifest.js gzip	489 B	490 B	⚠️ +1 B
Overall change	489 B	490 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
index.html gzip	529 B	529 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	523 B	523 B	✓
Overall change	1.59 kB	1.59 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-4e38b05900fed34fcf34.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-84f762b2104d16092912.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-9f3217619d55070db8f1.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-36845453cb7a35e1a731.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -496,28 +496,27 @@
         var wrapperStyle;
         var sizerStyle;
         var sizerSvg;
-
-        var imgStyle = _objectSpread(
-          {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            boxSizing: "border-box",
-            padding: 0,
-            border: "none",
-            margin: "auto",
-            display: "block",
-            width: 0,
-            height: 0,
-            minWidth: "100%",
-            maxWidth: "100%",
-            minHeight: "100%",
-            maxHeight: "100%",
-            objectFit: objectFit,
-            objectPosition: objectPosition
-          },
+        var imgStyle = {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          boxSizing: "border-box",
+          padding: 0,
+          border: "none",
+          margin: "auto",
+          display: "block",
+          width: 0,
+          height: 0,
+          minWidth: "100%",
+          maxWidth: "100%",
+          minHeight: "100%",
+          maxHeight: "100%",
+          objectFit: objectFit,
+          objectPosition: objectPosition
+        };
+        var blurStyle =
           placeholder === "blur"
             ? {
                 filter: "blur(20px)",
@@ -525,8 +524,7 @@
                 backgroundImage: 'url("'.concat(blurDataURL, '")'),
                 backgroundPosition: objectPosition || "0% 0%"
               }
-            : undefined
-        );
+            : {};
 
         if (layout === "fill") {
           // <Image src="i.png" layout="fill" />
@@ -688,7 +686,7 @@
                 setRef(img);
                 handleLoading(img, srcString, placeholder, onLoadingComplete);
               },
-              style: imgStyle
+              style: _objectSpread(_objectSpread({}, imgStyle), blurStyle)
             })
           ),
           priority

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
buildDuration	10.5s	10.5s	-25ms
buildDurationCached	4.1s	4.1s	-71ms
nodeModulesSize	49.5 MB	49.5 MB	⚠️ +101 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.188	2.139	-0.05
/ avg req/sec	1142.73	1168.72	+25.99
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.123	1.156	⚠️ +0.03
/error-in-render avg req/sec	2227.11	2163.25	⚠️ -63.86

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
17.HASH.js gzip	2.98 kB	2.98 kB	✓
18.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	13.7 kB	13.7 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	8.4 kB	8.4 kB	✓
webpack-HASH.js gzip	1.22 kB	1.22 kB	✓
Overall change	68.4 kB	68.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.76 kB	3.76 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 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	3.02 kB	3.02 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.6 kB	17.6 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-blur-placeholder-noscript	Change
index.html gzip	577 B	577 B	✓
link.html gzip	588 B	588 B	✓
withRouter.html gzip	570 B	570 B	✓
Overall change	1.74 kB	1.74 kB	✓

Commit: d899002

hlubek · 2021-08-18T11:12:35Z

Blur placeholders still have issues with JS disabled (stay visible on top of noscript image). I opened #28251 for this.

We shouldn't be setting `placeholder=blur` styles when JS is disabled because we'll have no way to know when the image is loaded and it will be stuck in blur permanently as mentioned in [this comment](vercel#19052 (comment)). This PR avoids blur styles on the `<noscript>` version of the image.

Fix placeholder=blur inside <noscript>

1ab3620

styfle requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners July 19, 2021 22:40

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Jul 19, 2021

styfle mentioned this pull request Jul 19, 2021

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

Merged

Merge branch 'canary' into fix-blur-placeholder-noscript

5a0c01f

This comment has been minimized.

Sign in to view

styfle added 3 commits July 19, 2021 19:30

Fix test

37a835b

Merge branch 'canary' into fix-blur-placeholder-noscript

3a8b4da

Revert unused test

aa052ce

ijjk approved these changes Jul 19, 2021

View reviewed changes

Merge branch 'canary' into fix-blur-placeholder-noscript

6721db8

This comment has been minimized.

Sign in to view

kodiakhq bot added 2 commits July 20, 2021 00:34

Merge branch 'canary' into fix-blur-placeholder-noscript

be342b0

Merge branch 'canary' into fix-blur-placeholder-noscript

d899002

kodiakhq bot merged commit 5cd37d9 into canary Jul 20, 2021

kodiakhq bot deleted the fix-blur-placeholder-noscript branch July 20, 2021 01:23

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `placeholder=blur` inside `<noscript>` #27311

Fix `placeholder=blur` inside `<noscript>` #27311

styfle commented Jul 19, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 20, 2021

Diffs

hlubek commented Aug 18, 2021

Fix placeholder=blur inside <noscript> #27311

Fix placeholder=blur inside <noscript> #27311

Conversation

styfle commented Jul 19, 2021 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 20, 2021

Stats from current PR

Diffs

hlubek commented Aug 18, 2021

Fix `placeholder=blur` inside `<noscript>` #27311

Fix `placeholder=blur` inside `<noscript>` #27311

styfle commented Jul 19, 2021 •

edited