Flicker effect when zooming out

[qrospars]

This issue is a:

• Bug report

Expected behavior

I expected no flicker when the image goes back to its original size

Actual behavior

When I click to go back to a zoomed out size, there is a flicker effect

Steps to reproduce behavior

1. Click on the image
2. Click out of the image
3. Notice the flicker

Link to repository/example of behavior

See my personal portfolio

1. Go to Portfolio
2. Click on "Work"
3. Open one of the projects
4. Click on an image
5. Click again to zoom out
6. Notice the flicker

Code Snippet;

<Zoom>
<img className="work-hover-text-content-im" src={`${process.env.PUBLIC_URL}/images/test.png`}/>
</Zoom>

Technical Details

• Built with React
• Chrome & Firefox browsers

How to solve issue?

It seems that it's coming from the data-rmiz-wrap property that is set as hidden when the user clicks on the image. If I force the value to be set as visible while zoomed in, I don't get the flicker when zooming out.

[rpearce]

Hi, @qrospars. Thanks for taking the time to write out this issue!

I'm currently spending my limited evening time on v5 (updates here: https://github.com/rpearce/react-medium-image-zoom/discussions/274#discussioncomment-3067777). I'll see if there's something I can do for this for v4 for you.

[rpearce]

@qrospars Nice portfolio! Yes, that is a glaring issue, and I'm not sure about a good solution for this for v4. Would you be willing to beta test the next version that I'm working on when I publish a beta release?

If you're interested, I can check back here when it's time. This is the branch I'm working off of: https://github.com/rpearce/react-medium-image-zoom/tree/v5-dev.

[qrospars]

Hi @rpearce,

Thanks for the compliment on my portfolio! :)

I would be glad to check the v5 when it's ready. I will watch the repository and check for new releases. Don't hesitate to follow up in this thread if you need testers!

[rpearce]

Oh, I will need help! Thank you

[rpearce]

@qrospars If you find some spare time and want to give the latest build a whirl, try this (assuming you're using npm):

npm i --save [email protected]

And, if you aren't already,

import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

// ... your other code

<Zoom>
  <MyImage />
</Zoom>

The updated README is here.

If you're using any of the customization options (I think I remember you have a slow transition), then be aware that the API has changed. If you want to change the transition times, you can do so by providing a CSS override for these:

https://github.com/rpearce/react-medium-image-zoom/blob/c51fe3aa6da6ec03ccbb7580ae3c28ea94ab6586/source/styles.css#L75

and

https://github.com/rpearce/react-medium-image-zoom/blob/c51fe3aa6da6ec03ccbb7580ae3c28ea94ab6586/source/styles.css#L92

I'm also considering having many of these values be set via CSS variables, too, so folx don't have to override. Let me know if you like that idea or not and how this goes for you, overall!

[qrospars]

Hi :)

Thank you for following up. The new version works well for me on Chrome. However, I still have the flicker issue. I will have a look at the repository to see where this issue could come from

For the CSS values, wouldn't it be easier for you to add custom properties to the "Zoom" component? I am not sure what would be the best approach, but this is how the usual animation library approaches it I think (example: https://www.framer.com/docs/examples/)

Something like this:

<Zoom transition={'ease-in'} duration={300}>
    <MyImage />
</Zoom>

[rpearce]

@qrospars The prior versions have done it like this, but I've seen usage where people wanted to control it using media queries (slower on big screens; faster on small screens). People can 💯 do that with JS using window.matches() or whatever, but most people don't have their components set up responsively. I'll think about that some more.

A couple of questions:

1. What operating system are you testing on?
2. Could you share the image with me, as well as anything else you can think of so I can reproduce this?

I'm working off of the v5-dev, by the way, if you take a look.

[rpearce]

I've just run through this in Edge, Chrome, and Firefox on Windows 10, and I'm not seeing this behavior. I also have just tested on Chrome, Firefox, and Safari on macOS.

I'm curious to see how we can repro this with a test case!

[rpearce]

I've not been able to reproduce this and have gone ahead and released 5.0.0. If you can get me a repro case, I can help fix your issue!

[rpearce]

@qrospars I haven't been able to reproduce this, nor have any other reports of it come in since releasing v5.

If you can get me a way to reproduce this with v5, I'll happily look into it and reopen this issue. Until then, I'm going to close this.