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

Fix next/future/image alt text #39366

Merged
merged 10 commits into from
Aug 6, 2022
Merged

Conversation

styfle
Copy link
Member

@styfle styfle commented Aug 5, 2022

In many browsers (other than Chrome), the alt text is visible while the image is loading. This causes a sense layout shift since you'll see a flash of text and then the image (although lighthouse measures 0 CLS, likely because Chrome doesn't have this problem). This PR updates next/future/image to hide the alt text, unless there is an error while loading the image in which case the alt text because relevant as the fallback.

Example:

image

Unfortunately, Safari also shows a border while lazy loading images and it cannot be styled.

See upstream issue here: https://bugs.webkit.org/show_bug.cgi?id=243601

In most browsers (other than Chrome), the alt text is visible while the image is loading. This causes CLS and is undesirable unless there is an error.
@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Aug 5, 2022
@ijjk

This comment was marked as outdated.

@ijjk

This comment was marked as outdated.

@styfle styfle marked this pull request as ready for review August 6, 2022 03:26
@kodiakhq kodiakhq bot merged commit 59a01ec into canary Aug 6, 2022
@kodiakhq kodiakhq bot deleted the show-hide-alt-text-future-image branch August 6, 2022 03:53
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 5, 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.

2 participants