ViewTransitions: Call to sharp().toBuffer() in nested component breaks view transitions

[coolroman]

Astro Info

Astro                    v3.1.4
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I am using sharp library to generate previews for the images. Preview is generated by calling to sharp(...).toBuffer() and then used as an inline style with base64 encoded image for "background-image: url(...)".
The issue is that view transitions work for the first image only.

Minimal reproducible example is provided.

What's the expected result?

View transitions work for all images with transition:name.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rbkdv6?file=src%2Flib.ts%3AL59,src%2Fpages%2Findex.astro%3AL10,src%2Fcomponents%2FImage.astro%3AL23

Participation

• I am willing to submit a pull request for this issue.