RafidMuhymin/astro-imagetools

Image flicker when using fadeInTransition with Picture

Opened this issue · 3 comments

futurefabric commented

Hey, firstly, thanks so much for making these image tools for Astro, so helpful :)

Hopefully I'm not missing something in the docs, but I am experiencing images flickering on load when using the fadeInTransition prop with the <Picture/> component. When I visit a page, an image fades in as expected, but when I then make a subsequent visit to the page (or refresh my browser), I briefly see the image for a short moment before it disappears and then fades in. I'm seeing this both locally and when deployed.

I can't diagnose exactly why this is happening, but I'm guessing it's something to do with the image being cached by the browser on the first request and then on subsequent visits to a page, that cached image is briefly being shown before it's hidden and faded in. Is it possible to prevent this from happening as it somewhat undermines the intent to always have a graceful fading in of images?

Cheers – happy to help dig in and try to diagnose this if I can be of use and I've attached a screen cap to show what I'm seeing and the <Picture /> code I'm using is below:

<Picture
    src={src}
    alt={alt}
    placeholder="dominantColor" 
    format={["webp"]}
    quality={90}
    fadeInTransition={{
      delay: "0.0s",
      duration: "0.4s",
      timingFunction: "ease-in",
    }}
 />
flicker.mov
LushawnDev commented

Did you ever find a workaround for this? I am also getting a flicker on page load

futurefabric commented

@LushawnDev No, I ended up giving up on this in favour of the image integration Astro are actively developing — https://docs.astro.build/en/guides/integrations-guide/image/. Think I'll enhance that with some custom JS of my own to do the fading etc.

LushawnDev commented