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.

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

[gatsby-image] re: fade out base64 on full image load #7539

Merged
merged 6 commits into from
Dec 12, 2018
Merged

[gatsby-image] re: fade out base64 on full image load #7539

merged 6 commits into from
Dec 12, 2018

Conversation

alexkirsz
Copy link
Contributor

See #2330

@alexkirsz
Copy link
Contributor Author

This issue still happens when JavaScript is disabled.

@alexkirsz alexkirsz mentioned this pull request Sep 3, 2018
Closed
@KyleAMathews KyleAMathews force-pushed the master branch 5 times, most recently from fc4ca3e to 2116fff Compare September 17, 2018 20:36
@KyleAMathews
Copy link
Contributor

Seems reasonable! Sorry for being so slow in reviewing @alexkirsz! Getting v2 clogged up working on PRs. Could you update from the latest master as there's merge conflicts now.

@stefanprobst stefanprobst mentioned this pull request Sep 21, 2018
Closed
@leolabs leolabs mentioned this pull request Oct 20, 2018
Closed
@m-allanson
Merge branch 'master' into topics/gatsby-image-hide-base64
837afbd 
* master: (1425 commits)
  showcase: Add TMDb Gatsby site (gatsbyjs#10411)
  chore(www): bump offline plugin version (gatsbyjs#10409)
  chore(release): Publish
  Fix Starter Library URL and update copy (gatsbyjs#10368)
  feat(gatsby-source-filesystem): keep original name of remote files (gatsbyjs#9777)
  docs(gatsby-source-contentful): Rewrite of gatsby-source-contentful query section (gatsbyjs#7533)
  Update "Deploying with Now" Guide (gatsbyjs#10390)
  Add Matomo to list of analytics plugins (gatsbyjs#10372)
  Add satispay.com to showcase (gatsbyjs#10380)
  Adds @goblindegook/gatsby-starter-typescript (gatsbyjs#10377)
  Fix typo in gatsby-remark-code-repls sample `gatsby-config.json` in README (gatsbyjs#10361)
  fix(gatsby): fix false type conflict warning on plugin fields (gatsbyjs#10355)
  fix(docs): Just a small typo fix in the docs (gatsbyjs#10359)
  feat(gatsby-image): add onStartLoad prop  (gatsbyjs#6702)
  fix(docs): add Ecosystem to docs sidebar, consistency with tutorial sidebar (gatsbyjs#10350)
  fix(www): Starters.yaml housekeeping (gatsbyjs#10354)
  docs: add ttag starter (gatsbyjs#10352)
  docs: document branching (gatsbyjs#9983)
  plugin checker initial commit (gatsbyjs#7062)
  docs: new starter features is required (gatsbyjs#10353)
  ...
@m-allanson
Fix for browser env without Intersection Observer available
d28d38f
@m-allanson
Simpler implementation
74ef272
@m-allanson
Copy link
Contributor

Thanks @alexkirsz! I merged the latest version of master into your branch, then spent some time testing your fix. I think I've found a simpler solution here.

The bug was happening in browsers without Intersection Observer (IE11 and Safari), and was caused because the component was marking the image as loaded before the image had actually loaded. This meant that when the image really was loaded, things were going a bit wonky.

Safari Tech Preview supports Intersection Observer and was working correctly without this fix.

I'm going to do some more tests on this, but so far it looks good on:

  • Chrome
  • Chrome Canary
  • Firefox
  • Safari
  • Safari Tech Preview
  • MS Edge
  • IE11

😅

pieh
pieh approved these changes Dec 12, 2018
View reviewed changes
Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

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

LGTM

@m-allanson m-allanson merged commit 069918a into gatsbyjs:master Dec 12, 2018
@gatsbot
Copy link

gatsbot bot commented Dec 12, 2018

Holy buckets, @alexkirsz — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

  1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
  2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

@m-allanson
Copy link
Contributor

Thanks again @alexkirsz, this was published as [email protected]

@m-allanson m-allanson mentioned this pull request Dec 12, 2018
Closed
m-allanson added a commit to Bouncey/gatsby that referenced this pull request Dec 14, 2018
@m-allanson
Merge branch 'master' into feat/no-watch-on-build
18f60c2 
* master: (33 commits)
  fix(blog): youfit case study typofix
  Doc improvements to Visual testing with Storybook guide (gatsbyjs#10436)
  fix(gatsby-plugin-offline): prevent incorrect revisioning of static file by workbox (gatsbyjs#10416)
  fix(starters): ttag repo link
  fix typo in pull request template (gatsbyjs#10454)
  fix(www) Fix query for plugin links always ?=undefined (gatsbyjs#10453)
  chore(release): Publish
  fix(gatsby): fix extracting StaticQuery nested in shorthand fragment (gatsbyjs#10443)
  fix(www): avoid querying for no-cache=1 (gatsbyjs#10389)
  fix(gatsby-image): update typescript definitions - properly mark fields as optional (gatsbyjs#10419)
  refactor(gatsby): improve EnsureResources (gatsbyjs#10224)
  Fixed minor Typos and grammatical errors (gatsbyjs#9353)
  docs: add ClinciJS website into showcase (gatsbyjs#10437)
  docs(babel-preset-gatsby): document --save-dev flag in README (gatsbyjs#10434)
  fix(docs): Environment Variables Examples (gatsbyjs#10406)
  chore(release): Publish
  [gatsby-image] re: fade out base64 on full image load (gatsbyjs#7539)
  docs(starter-library): add example to starter library (gatsbyjs#10425)
  docs(gatsby-plugin-offline): specify to not HTTP-cache sw.js (gatsbyjs#10430)
  fix(docs): prompt => confirm (gatsbyjs#10431)
  ...
gpetrioli pushed a commit to gpetrioli/gatsby that referenced this pull request Jan 22, 2019
@alexkirsz @gpetrioli
[gatsby-image] re: fade out base64 on full image load (gatsbyjs#7539)
14b288b 
* Make initial state be the same on both client and server

* Fix for browser env without Intersection Observer available

* Simpler implementation

* Typo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pieh pieh pieh approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@alexkirsz @KyleAMathews @m-allanson @pieh