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

Gatsby image does not show a proper placeholder when re-entering a page, and images didn't fully load the first time #37773

Open
2 tasks done
Szulerinio opened this issue Mar 21, 2023 · 0 comments
Labels
status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer type: bug An issue or pull request relating to a bug in Gatsby

Comments

@Szulerinio
Copy link

Preliminary Checks

Description

On macOS and iOS on Safari, when entering a given page, visible Gatsby images start to load with proper placeholder, but if they don't finish loading (or didn't start because they were out of view?) before user leaves this page, when he comes back, images no longer have proper placeholder

hosted example of the bug: https://my-gatsby-site-jet.vercel.app

Reproduction Link

https://github.com/Szulerinio/gatsbyImage-safari-bug

Steps to Reproduce

  1. Enter page one (index in example) with images not loaded (preferably in incognito with slower internet connection).
  2. Switch to page with gatsbyImage components (click link in example)
  3. Quickly switch back to another page (click link in example), without triggering loading of at least some of the images.
  4. Again switch to page with images, and quickly move to not loaded images (scroll to right on example).

Expected Result

On the second page enter, images should display a blurred placeholder when image loads.

Actual Result

On second page enter, images display alt text and borders similar to image that failed to load

Environment

System:
    OS: macOS 12.6.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.2.0 - ~/.nvm/versions/node/v19.2.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v19.2.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 111.0
    Safari: 15.6.1
  npmPackages:
    gatsby: ^5.9.0-next.0 => 5.9.0-next.0
    gatsby-plugin-image: ^3.7.0 => 3.7.0
    gatsby-plugin-sass: ^6.7.0 => 6.7.0
    gatsby-plugin-sharp: ^5.7.0 => 5.7.0
    gatsby-source-filesystem: ^5.7.0 => 5.7.0
    gatsby-transformer-sharp: ^5.7.0 => 5.7.0

Config Flags

Not a flag, but I had to use install --legacy-peer-deps for gatsby@next to work properly

@Szulerinio Szulerinio added the type: bug An issue or pull request relating to a bug in Gatsby label Mar 21, 2023
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Mar 21, 2023
@Szulerinio Szulerinio changed the title Gatsby image does not show the proper placeholder when re-entering a page, and images didn't fully load the first time Gatsby image does not show a proper placeholder when re-entering a page, and images didn't fully load the first time Mar 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

No branches or pull requests

1 participant