Image flicker when using fadeInTransition with Picture

futurefabric commented 1 year ago

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",
    }}
 />

https://user-images.githubusercontent.com/265403/195322171-69d5dbf1-11ac-4f15-ba37-cad923dc7e0e.mov

LushawnDev commented 1 year ago

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

futurefabric commented 1 year ago

@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 1 year ago

Yeah I was actually thinking of doing the exact same, but using the new Astro Assets feature which is going to be replacing their component.

The only thing I really wanted to keep from this integration is that it generates all the different image sizes automatically, I need to find another way to do that as it's so convenient.

On Mon, 22 May 2023, 22:47 Guy Moorhouse, @.***> wrote:

@LushawnDev https://github.com/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.

— Reply to this email directly, view it on GitHub https://github.com/RafidMuhymin/astro-imagetools/issues/130#issuecomment-1558066342, or unsubscribe https://github.com/notifications/unsubscribe-auth/APCDDRXVKFNVJXGLIE62DFDXHPNGZANCNFSM6AAAAAARDFA3DA . You are receiving this because you were mentioned.Message ID: @.***>

RafidMuhymin / astro-imagetools

Image flicker when using fadeInTransition with Picture #130