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

Jump to bottom

Fix flashing of no-src image when using next/image #18195

Merged
merged 2 commits into from Oct 24, 2020
Merged

Fix flashing of no-src image when using next/image #18195

merged 2 commits into from Oct 24, 2020

Conversation

timneutkens
Copy link
Member

@timneutkens timneutkens commented Oct 24, 2020 •
edited

Solves on of the issues in #18122

@timneutkens timneutkens mentioned this pull request Oct 24, 2020
Closed
24 tasks
styfle
styfle previously approved these changes Oct 24, 2020
View reviewed changes
Copy link
Member

@styfle styfle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch!

@ijjk
Copy link
Member

ijjk commented Oct 24, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js fix/404-flash Change
buildDuration 13.2s 12.8s -400ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +236 B
Page Load Tests Overall increase ✓
vercel/next.js canary timneutkens/next.js fix/404-flash Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.404 2.339 -0.06
/ avg req/sec 1039.97 1069.05 +29.08
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.362 1.247 -0.11
/error-in-render avg req/sec 1836.16 2005.52 +169.36
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..574c.js gzip 11.2 kB 11.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-af76201..828d.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..dule.js gzip 7.02 kB 7.02 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-3ba933e..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary timneutkens/next.js fix/404-flash Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 995 B 995 B ✓
Overall change 3 kB 3 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js fix/404-flash Change
buildDuration 14.8s 14.1s -693ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +236 B
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..574c.js gzip 11.2 kB 11.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-af76201..828d.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..dule.js gzip 7.02 kB 7.02 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-3ba933e..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Serverless bundles
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_error.js 1.06 MB 1.06 MB ✓
404.html 4.73 kB 4.73 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.06 MB 1.06 MB ✓
link.js 1.1 MB 1.1 MB ✓
routerDirect.js 1.1 MB 1.1 MB ✓
withRouter.js 1.1 MB 1.1 MB ✓
Overall change 5.42 MB 5.42 MB ✓
Commit: c9dd3b1

@timneutkens @styfle
Update packages/next/client/image.tsx
512ec65 
Co-authored-by: Steven <steven@ceriously.com>
@ijjk
Copy link
Member

ijjk commented Oct 24, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js fix/404-flash Change
buildDuration 12.8s 12.8s ⚠️ +46ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +292 B
Page Load Tests Overall increase ✓
vercel/next.js canary timneutkens/next.js fix/404-flash Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.502 2.34 -0.16
/ avg req/sec 999.05 1068.29 +69.24
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.256 1.279 ⚠️ +0.02
/error-in-render avg req/sec 1990.3 1953.91 ⚠️ -36.39
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..574c.js gzip 11.2 kB 11.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-af76201..828d.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..dule.js gzip 7.02 kB 7.02 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-3ba933e..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary timneutkens/next.js fix/404-flash Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 995 B 995 B ✓
Overall change 3 kB 3 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js fix/404-flash Change
buildDuration 15s 14.3s -647ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +292 B
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..574c.js gzip 11.2 kB 11.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-af76201..828d.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
677f882d2ed8..dule.js gzip 7.02 kB 7.02 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-3ba933e..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary timneutkens/next.js fix/404-flash Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Serverless bundles
vercel/next.js canary timneutkens/next.js fix/404-flash Change
_error.js 1.06 MB 1.06 MB ✓
404.html 4.73 kB 4.73 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.06 MB 1.06 MB ✓
link.js 1.1 MB 1.1 MB ✓
routerDirect.js 1.1 MB 1.1 MB ✓
withRouter.js 1.1 MB 1.1 MB ✓
Overall change 5.42 MB 5.42 MB ✓
Commit: 512ec65

@kodiakhq kodiakhq bot merged commit 58c161c into vercel:canary Oct 24, 2020
@timneutkens timneutkens deleted the fix/404-flash branch October 24, 2020 15:24
@axelpezzo
Copy link

I'm still having this issue when I refresh the page. I think that a CSS inline fix is not the fix as we're searching for.

@shuding shuding mentioned this pull request Mar 22, 2021
Merged
8 tasks
kodiakhq bot pushed a commit that referenced this pull request Mar 22, 2021
@shuding
Remove visibility: hidden from the image component (#23278)
c8680a3 
This PR removes the `visibility` style property change from next/image. It was previously added in #18195 to fix a bug that when no `src` is set, and that bug is not valid anymore as all images will always have `src` (and a fallback too).

It also fixes the problem that screen readers ignore elements with `visibility: hidden`.

Fixes #23201.

## Bug

- [x] Related issues #23201
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes
SokratisVidros pushed a commit to SokratisVidros/next.js that referenced this pull request Apr 20, 2021
@shuding @SokratisVidros
Remove visibility: hidden from the image component (vercel#23278)
e0f3b70 
This PR removes the `visibility` style property change from next/image. It was previously added in vercel#18195 to fix a bug that when no `src` is set, and that bug is not valid anymore as all images will always have `src` (and a fallback too).

It also fixes the problem that screen readers ignore elements with `visibility: hidden`.

Fixes vercel#23201.

## Bug

- [x] Related issues vercel#23201
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Apr 29, 2021
@shuding
Remove visibility: hidden from the image component (vercel#23278)
e8bb164 
This PR removes the `visibility` style property change from next/image. It was previously added in vercel#18195 to fix a bug that when no `src` is set, and that bug is not valid anymore as all images will always have `src` (and a fallback too).

It also fixes the problem that screen readers ignore elements with `visibility: hidden`.

Fixes vercel#23201.

## Bug

- [x] Related issues vercel#23201
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes
@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@styfle styfle styfle approved these changes

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@timneutkens @ijjk @axelpezzo @styfle