If original image has a transition, zoom becomes uncloseable

Bug description

If the image used for the zoom has a transition applied in its style attribute, the zoom will happen (but without animating the transform of the zoom image) but will be uncloseable since medium-zoom never sets isAnimating = false.

This is because medium-zoom listens for the transitionend event, with no fallback. Since the target element is copied to create the zoom image, the style attribute is copied too - and this is never overwritten (the transition defined by medium-zoom is done so in a stylesheet, and is therefore overwritten by the style). Since this means that there’s no transition: transform, the transition never starts or ends, and no transitionend event is emitted.

How to reproduce

1. Create an image with style="transition: opacity 0.5s" or similar
2. Run medium-zoom(...) on your image
3. Click the image - the zoom will open instantly and become uncloseable

Expected behavior

It works even if image has a transition set in its style.

Reproducible example

Link to the bug reproduction

[madeleineostoja]

I’m also seeing this, in my case with a 3rd party library (gatsby-image) where I have no control over the transitions defined. Either one of the patches mentioned by @birjolaxew would be great, even as opt-in behaviour

[birjj]

@francoischalifour There are generally two ways to fix this: you can either add !important to the transition you define in your stylesheet (in which case it still breaks if the user adds a transition: ... !important, but y’know, that’s pretty edge case), or you can explicitly set the transition on the cloned element e.g. active.zoomed.style.transition = "transform 300ms cubic-bezier(0.2, 0, 0.2, 1)";

Neither should add much complexity.