react-medium-image-zoom: Incorrect scale on iOS with constrained unzoomed width

This issue is a:

Bug report

Expected behavior

That the zoomed image would scale correctly on all platforms.

Actual behavior

On iOS, the zoomed image is scaled based on the rendered size of the unzoomed image and appears blurry.

The zooming does work as expected on desktop and Android. This issue appears to be related to iOS only.

Steps to reproduce behavior

Apply a constrained width to an unzoomed image (e.g. 20%)
View the page with an iOS device
Run the linked the example below in the dev server and view it with an iOS device (both Safari and Chrome for iOS exhibit the same behavior).

Link to repository/example of behavior

I have patched the example to apply a 20% width style attribute that highlights the behavior - the patch to the upstream is here

This runs with the pre-configured node dev server.

Notes

This example contains the fix from #101, so hopefully this issue is not a duplicate of that.

I had a go at trying to tweak the transform logic here:

https://github.com/rpearce/react-medium-image-zoom/blob/25d563e3e0d03eb7cc72e560e7e1e035feff2a1d/src/Zoom.js#L141

I made some improvements by adding a {zoom: 2} property and halving the scale factor. This appears to make the device render the full resolution. So the image is now clear. But the side effect is that the X,Y coordinate logic pushes the image out of the viewport.

I saw that a rewrite of the library is in progress, so I decided to first report this issue and provide a means of reproducing the symptom first.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 33 (21 by maintainers)

Most upvoted comments

@rpearce Many thanks for keeping me in the loop - I fully appreciate the intricacy, having tried to fix the issue myself…

0x6e6562 on Jan 20, 2019

…and I was wrong. It’s still an issue. This is 💯 priority. If you go to this link in Safari and shrink the screen down, https://rpearce.github.io/react-medium-image-zoom/?path=/story/react-medium-image-zoom--with-image-gallery-using-divs-background-images, you can see the issue clear as day.

rpearce on Dec 18, 2019

FYI now that v4 is in alpha, I’ve put this at the top of the project board to make it the next thing I look in to to see if I’ve been able to resolve it or not.

rpearce on Dec 18, 2019

@0x6e6562 I’ve narrowed the issue down to being because of using width & height in addition to scale() on the added image (the one that is thrown onto the overlay, scaled up and eventually replaced by a bigger one), and I have yet to figure out a solution that doesn’t rip out how the zooming works in the first place. It currently relies on the transform and transition on the transform to provide the animation, but if I change that, I change how all the things work.

I’m going to make one efforting using vh and vw instead of scale() to see if I can achieve the same result, but if not, I’m going to have to leave this for now and factor all this into the rewrite.

rpearce on Jan 19, 2019

@rpearce Many thanks for taking the time to look into this one.

Great news about scaling in dev tools - sounds like it’ll just take a bit of time to tease out?

I appreciate that it’s a gnarly issue - when I looked at this before, I thought I would end up with producing a fix that I could submit as a PR. Sadly, it turns out that it is more intricate than meets the eye.

I take your point about the zoom attribute - I was just noting that I had made some mileage by playing around with it. But ultimately I didn’t find the right combination in any case, so adding the fact MDN says to keep away, sounds that that route should be avoided.

0x6e6562 on Jan 14, 2019