gatsby: BlurUp effect gets stuck on

Description

On some devices, iphone at least, the blurup effect does not clear after image has loaded. This happens on the first time image is shown, if user navigates to another page and then back the blur disappears.

Steps to reproduce

Load basic page with an gatsby-image Img-tag on iphone.

Expected result

Blur should clear when the image has been loaded

Actual result

Blur stays

Environment

Gatsby version (npm list gatsby):
gatsby-cli version (gatsby --version): gatsby@1.9.76
Node.js version: v6.10.3
Operating System: macOS 10.12.6

File contents (if changed):

gatsby-config.js: package.json: gatsby-node.js: gatsby-browser.js: gatsby-ssr.js:

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 30 (19 by maintainers)

Most upvoted comments

I’m experiencing this consistently in Safari on macOS as well as iOS. Trashing .cache and public and re-running the build does not change the behavior for me. No errors are shown in the web console, unlike some other reports of this.

+11

coreyward on Sep 17, 2018

I just began toying around with Gatsby a day ago and at some point I noticed images were not working in the deployed version of the project - the blur image would remain stuck. I hadn’t touched the public or .cache folder at all. Got the images working by deleting both and rebuilding and redeploying.

arggh on Apr 17, 2018

TracedSVG effect still gets stuck in Chrome/Safari in iOS, if using WEBP format. Example query in simple Gatsby page:

        fluid (
          traceSVG: {
            color: "#333",
          }
          quality: 85
          toFormat: WEBP
        ) {
          ...GatsbyImageSharpFluid_tracedSVG
        }

Anyone can help with this issue?

goodok21 on Dec 19, 2018

I have seen the issue when the image file in public/static is deleted. It isn’t recreated if we rebuild Gatsby.

A delete of the cache followed with a Gatsby clean resolves the issue as the images are regenerated.

On Sat 14 Apr, 2018, 10:19 AM Kyle Mathews, notifications@github.com wrote:

Does anyone have a way to reliably reproduce this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/4926#issuecomment-381303335, or mute the thread https://github.com/notifications/unsubscribe-auth/ADT8tV2qAsLCO9TQBZV1Jk7lVdT12H08ks5toX_2gaJpZM4TO8QG .

Jaikant on Apr 14, 2018

@goodok21 Safari and Chrome for iOS do not have support for WebP images. Since you’re forcing the format there’s nothing to blur-up to. The fragment GatsbyImageSharpFluid_withWebp_tracedSVG will do what you’re looking for while providing the default image format as a fallback for browsers that don’t yet support WebP.

coreyward on Dec 19, 2018

This should be fixed in gatsby-image@2.0.24, see #7539 for details! I’m going to close this, please re-open or create a new issue if it’s not fixed for you.

m-allanson on Dec 12, 2018

Why issue is closed? The problem is still actual.

kodemi on Oct 22, 2018

Sorry, I don’t quite understand. You mean these fragments? GatsbyImageSharpResolutions GatsbyImageSharpResolutions_noBase64 GatsbyImageSharpResolutions_tracedSVG GatsbyImageSharpResolutions_withWebp GatsbyImageSharpResolutions_withWebp_noBase64 GatsbyImageSharpResolutions_withWebp_tracedSVG

There is no “GatsbyImageSharpResolutions_NOtracedSVG”, I have tried some of these and finally “GatsbyImageSharpResolutions_noBase64” seems to not to have the blurring effect.

Maybe the problem was not traced svg, I don’t know. I don’t understand this plugin or gatsby that well yet.

LyhjeHylje on Apr 11, 2018