Zooming to bottom center of image on iPad (possibly all iOS)

[alex-r89]

Hi Brad,

Im not 100% sure if this is an issue with the pinch and zoom component specifically, so apologies if this is not related: I am noticing that on pinch, the zoom is always going to the bottom center of the image on an iPad and iPhone, regardless of where I pinch on the image.

The reason I say I'm not 100% sure is because it seems to work perfectly fine on iPad and iPhone on your demo pages.

I was therefore just wondering if you had noticed this, or are doing anything specific when implementing this onto a page?

[alex-r89]

Hi Brad,

Sorry to double post. I have been looking into this quite extensively and notice a few issues, predominantly on mobile.

1. The component seems to capture gestures on the Y axis and consume them. For example, if the image is the entire viewport height and width, a user will not be able to scroll down the page because the component is consuming the Y axis swipe. I believe this is down to the handleTouchStart function, specifically the else if (touches.length === 1) block.

2. The image appears to be slightly scaled in (or zoomed in?) when the component renders if the initialScale is auto

3. The pinch zoom functionality zooming down to the bottom center, regardless of where the image is pinched (may be an integration issue not component related)

[bradstiff]

Hi Alex,

1. This should only happen when there is overflow in that direction. This is by design. The overflow scrolls into view until there is no overflow left. And then the viewport should scroll on the next gesture. But it sounds like you are seeing something else?
2. Not sure what's up there. If the image is being scaled and there is overflow on the Y axis, this may explain what you are seeing in your first point?
3. Not sure what's up there either.

Unfortunately I don't have an iOS device at all, so I can't troubleshoot. I can only try to speculate by looking at the code and playing what-if. The more tidbits of info you can provide, the better.

[bradstiff]

Would the following be consistent what you are seeing in your first two points:

The image is being zoomed in slightly on initial load, even though the image dimensions perfectly match the container dimensions. There is slight overflow. But, when swiping up or down, neither the image nor the page moves at all.

If so, it would suggest that the overflow is unexpected and somehow 'out of reach.' It would suggest that there is some unexpected dimension that is not being taken into account.

[bradstiff]

Can you send a link to a repro?

[alex-r89]

Hi Brad,

I think you are correct, the component consuming the Y axis swipe must be related to the image being slightly zoomed on render. However, this is occurring on both my implementation and in your demo pages on iOS devices.

I am still unsure as to why it is only zooming to the bottom center on pinch in my implementation.

Unfortunately I do not have a link to the repo as it is private and I am unable to open it up publicly.

[bradstiff]

If you pass debug={true} to the component, it will overlay a div with some debug info. Can you tell me what it says? Can you also send the dimensions of the image itself?