Skip to content

Fix style.filter on image with placeholder=blur #32623

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Dec 18, 2021
Merged

Fix style.filter on image with placeholder=blur #32623

merged 4 commits into from
Dec 18, 2021

Conversation

styfle
Copy link
Member

@styfle styfle commented Dec 18, 2021

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Dec 18, 2021
@styfle styfle mentioned this pull request Dec 18, 2021
Closed
@ijjk

This comment has been minimized.

Sign in to view
@ijjk
Copy link
Member

ijjk commented Dec 18, 2021

Stats from current PR

Default Build (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
buildDuration 18.1s 18s -74ms
buildDurationCached 3.4s 3.4s ⚠️ +18ms
nodeModulesSize 348 MB 348 MB ⚠️ +3 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.935 2.949 ⚠️ +0.01
/ avg req/sec 851.92 847.67 ⚠️ -4.25
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.293 1.306 ⚠️ +0.01
/error-in-render avg req/sec 1933.83 1913.98 ⚠️ -19.85
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
450.HASH.js gzip 179 B 179 B ✓
framework-HASH.js gzip 42.2 kB 42.2 kB ✓
main-HASH.js gzip 30.2 kB 30.2 kB ✓
webpack-HASH.js gzip 1.45 kB 1.45 kB ✓
Overall change 74 kB 74 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
_app-HASH.js gzip 1.37 kB 1.37 kB ✓
_error-HASH.js gzip 194 B 194 B ✓
amp-HASH.js gzip 312 B 312 B ✓
css-HASH.js gzip 326 B 326 B ✓
dynamic-HASH.js gzip 2.37 kB 2.37 kB ✓
head-HASH.js gzip 350 B 350 B ✓
hooks-HASH.js gzip 919 B 919 B ✓
image-HASH.js gzip 4.73 kB 4.73 kB ⚠️ +2 B
index-HASH.js gzip 263 B 263 B ✓
link-HASH.js gzip 2.13 kB 2.13 kB ✓
routerDirect..HASH.js gzip 321 B 321 B ✓
script-HASH.js gzip 383 B 383 B ✓
withRouter-HASH.js gzip 318 B 318 B ✓
85e02e95b279..7e3.css gzip 107 B 107 B ✓
Overall change 14.1 kB 14.1 kB ⚠️ +2 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
_buildManifest.js gzip 459 B 460 B ⚠️ +1 B
Overall change 459 B 460 B ⚠️ +1 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
index.html gzip 532 B 532 B ✓
link.html gzip 545 B 545 B ✓
withRouter.html gzip 526 B 526 B ✓
Overall change 1.6 kB 1.6 kB ✓

Diffs

Diff for _buildManifest.js 
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-7741d74715a0ad4f.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-d9e6d42eea8b0755.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-76af1f5604a3f190.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
Diff for image-HASH.js 
@@ -408,7 +408,7 @@
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
               if (placeholder === "blur") {
-                img.style.filter = "none";
+                img.style.filter = "";
                 img.style.backgroundSize = "none";
                 img.style.backgroundImage = "none";
               }
Default Build with SWC (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
buildDuration 19.6s 19.6s ⚠️ +4ms
buildDurationCached 3.4s 3.3s -49ms
nodeModulesSize 348 MB 348 MB ⚠️ +3 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.879 2.938 ⚠️ +0.06
/ avg req/sec 868.31 850.8 ⚠️ -17.51
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.329 1.323 -0.01
/error-in-render avg req/sec 1880.68 1889.08 +8.4
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
450.HASH.js gzip 179 B 179 B ✓
framework-HASH.js gzip 42.3 kB 42.3 kB ✓
main-HASH.js gzip 30.3 kB 30.3 kB ✓
webpack-HASH.js gzip 1.44 kB 1.44 kB ✓
Overall change 74.3 kB 74.3 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
_app-HASH.js gzip 1.35 kB 1.35 kB ✓
_error-HASH.js gzip 180 B 180 B ✓
amp-HASH.js gzip 305 B 305 B ✓
css-HASH.js gzip 321 B 321 B ✓
dynamic-HASH.js gzip 2.36 kB 2.36 kB ✓
head-HASH.js gzip 342 B 342 B ✓
hooks-HASH.js gzip 906 B 906 B ✓
image-HASH.js gzip 4.75 kB 4.75 kB ⚠️ +2 B
index-HASH.js gzip 256 B 256 B ✓
link-HASH.js gzip 2.19 kB 2.19 kB ✓
routerDirect..HASH.js gzip 314 B 314 B ✓
script-HASH.js gzip 375 B 375 B ✓
withRouter-HASH.js gzip 309 B 309 B ✓
85e02e95b279..7e3.css gzip 107 B 107 B ✓
Overall change 14.1 kB 14.1 kB ⚠️ +2 B
Client Build Manifests
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
_buildManifest.js gzip 459 B 459 B ✓
Overall change 459 B 459 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js fix-filter-img-placeholder-blur Change
index.html gzip 532 B 532 B ✓
link.html gzip 545 B 545 B ✓
withRouter.html gzip 526 B 526 B ✓
Overall change 1.6 kB 1.6 kB ✓

Diffs

Diff for _buildManifest.js 
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-7741d74715a0ad4f.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-d9e6d42eea8b0755.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-76af1f5604a3f190.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
Diff for image-HASH.js 
@@ -408,7 +408,7 @@
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
               if (placeholder === "blur") {
-                img.style.filter = "none";
+                img.style.filter = "";
                 img.style.backgroundSize = "none";
                 img.style.backgroundImage = "none";
               }
Commit: b11a32e

@kodiakhq kodiakhq bot merged commit 079c4be into canary Dec 18, 2021
@kodiakhq kodiakhq bot deleted the fix-filter-img-placeholder-blur branch December 18, 2021 02:08
@styfle styfle mentioned this pull request Dec 20, 2021
Merged
kodiakhq bot pushed a commit that referenced this pull request Dec 20, 2021
@styfle
Fix style reset on image with placeholder=blur (#32680)
738a964 
This PR is a follow up to PR #32623 to fix the remaining blur styles.

These are unlikely to be overridden by the user but this PR is necessary to make `placeholder=empty` (default behavior) and `placeholder=blur` end up with the same inline styles on the loaded image.

Related to #18398 (comment)
@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

@shuding shuding Awaiting requested review from shuding

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Image Component doesn't forwardsRef
2 participants
@styfle @ijjk
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy