search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 160 forks source link

Not working after the page transition in Astro #203

Closed Nomango closed 7 months ago

Nomango commented 8 months ago

Bug description

medium-zoom is not working after the page transition in Astro.

The reason seems to be that style in header is gone after page transition.

How to reproduce

  1. Use Astro and ViewTransition
  2. Execute mediumZoom and navigate to any page
  3. See error

Expected behavior

mediumZoom works normally.

Reproducible example

Link to the bug reproduction

Environment

francoischalifour commented 8 months ago

This isn't a problem with Medium Zoom but rather with the Astro page transition lifecycle?

Nomango commented 8 months ago

Astro documentation mentions that

The contents of the \<head> are swapped out inside the startViewTransition callback

and also

Module scripts are only ever executed once because the browser keeps track of which modules are already loaded. For these scripts, you do not need to worry about re-execution.

So that the injected css disappears after cleaning \<head> during page transition.

Should it be automatically re-injected?

francoischalifour commented 8 months ago

I see. Ideally we would expose another JS bundle without injected styles, and another CSS dist file that you would import yourself. This way you've got better control on the styles.

francoischalifour commented 8 months ago

Would you be interested in contributing to this?

Nomango commented 8 months ago

Of course! But... my front-end skills are not good. Actually, I can only understand what you mean but have no idea about how to implement it. 😂 Sorry.

If you don't have much time on it, I am willing to give it a try, but it may take some time.