Cant scroll past main image on mobile

[Budapresst]

Greetings..

I'm using the lens position setting and the hammer.js integration from your demo. My gallery is at the top of the page. When the page loads on mobile, there is no way to access the content under the gallery without scrolling through the gallery, but scrolling through the main image doesn't work. The only way to scroll past the gallery is to use the 5px of non-image space on either side of the image.

You can see the issue by checking out your own demos here: https://payalord.github.io/xZoom/ On your site, the galleries are not at the top of the page, so you can sort of "get a running start" and scroll right past them, but if you stop scrolling just above one of your galleries and then try to get going again withe the lead image being the first point of contact, then you should see the issue.

I'm testing on Android 5 btw, if it matters...

Any advice?

Thanks!

[payalord]

I think this happens because there is event attached on scroll for scale by default, which useful for desktop version. But for touch devices it is not useful completely, because on touch devices there is no mouse. So scale better to reattach to pinch gesture instead. I will create an example today later in sandbox to illustrate this approach.

[Budapresst]

Fantastic!

Thank you very much, Azat!

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=icon Virus-free. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=link <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On Thu, Jul 26, 2018 at 11:11 AM, Azat Ahmedov notifications@github.com wrote:

I think this happens because there is event attached on scroll for scale by default, which useful for desktop version. But for touch devices it is not useful completely, because on touch devices there is no mouse. So scale better to reattach to pinch gesture instead. I will create an example today later in sandbox to illustrate this approach.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/payalord/xZoom/issues/50#issuecomment-408031929, or mute the thread https://github.com/notifications/unsubscribe-auth/AVlmwXLo722uJQRk6oGa64jzZfeMOqVVks5uKYffgaJpZM4VfWvg .

-- Alexander Dean ExpatTech Development Services Budapest, Hungary www.expattech.com +36 1 215 1143

[Budapresst]

Hi Azat,

Did you have any time to play with this? No pressure, just curious...

Thanks, Alec

On Thu, Jul 26, 2018 at 11:11 AM, Azat Ahmedov notifications@github.com wrote:

I think this happens because there is event attached on scroll for scale by default, which useful for desktop version. But for touch devices it is not useful completely, because on touch devices there is no mouse. So scale better to reattach to pinch gesture instead. I will create an example today later in sandbox to illustrate this approach.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/payalord/xZoom/issues/50#issuecomment-408031929, or mute the thread https://github.com/notifications/unsubscribe-auth/AVlmwXLo722uJQRk6oGa64jzZfeMOqVVks5uKYffgaJpZM4VfWvg .

-- Alexander Dean ExpatTech Development Services Budapest, Hungary www.expattech.com +36 1 215 1143

[payalord]

I'm sorry, really had a lot of work to do this week.

[payalord]

Will try on this weekend.

[Budapresst]

cool... i'm launching my project Sept. 1... so, I'm just hoping to get the scrolling optimized in the next few weeks... any help for you is a total bonus and greatly appreciated! have a nice weekend!

Alexander Dean ExpatTech Development +36 20 227 6335

On Sat, 4 Aug 2018 12:49 Azat Ahmedov, notifications@github.com wrote:

Will try on this weekend.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/payalord/xZoom/issues/50#issuecomment-410441150, or mute the thread https://github.com/notifications/unsubscribe-auth/AVlmwVjFkd2JHsMLTc7oT-yA86p3nTQRks5uNXxIgaJpZM4VfWvg .

[payalord]

I have added example with Hammer.js version 2, to xzoom-sandbox repository here: https://github.com/payalord/xzoom-sandbox/tree/master/Hammer.jsV2

Which available to check and test now from mobile by this link: https://payalord.github.io/xzoom-sandbox/Hammer.jsV2/

To fix scroll issue, it is required to use touchAction, but unfortunately Hammers option touchAction is not working as declared, I tested it several times, need to report them about that, but this is another story. The only thing right now that is matter is this:

Chrome 35+, IE10+ and soon FireFox, support the touch-action property. This property tells the browser how to handle touches on an element. It improves the detection and experience of the gestures a lot, because it can prevent scrolling of the page without any JavaScript has to be executed, which can be too late in some cases.

Hammer uses a javascript fallback for this property when needed, so it is working with non-supporting browsers too. Still, on some (unpopular) devices the fallback might not work as good as the native support.

So i fixed scroll by manually adding touch-action: pan-x via jQuery to the required element on pan event.

Also this example is not prefect. Because the behaviour of how exactly must be done interaction with mobile gestures depends on developer preferences. In my example i decided to use approach like first tap is opening zoom, then pan available to move image inside zoom area and then second tap will close zoom.

[Budapresst]

wow! Thank you so much! This is a big help... I will check it out soon! :)

On Sun, Aug 5, 2018 at 7:16 AM, Azat Ahmedov notifications@github.com wrote:

I have added example with Hammer.js version 2, to xzoom-sandbox repository here: https://github.com/payalord/xzoom-sandbox/tree/master/Hammer.jsV2

Which available to check and test now from mobile by this link: https://payalord.github.io/xzoom-sandbox/Hammer.jsV2/

To fix scroll issue, it is required to use touchAction, but unfortunately Hammers option touchAction is not working as declared, I tested it several times, need to report them about that, but this is another story. The only thing right now that is matter is this http://hammerjs.github.io/touch-action/:

Chrome 35+, IE10+ and soon FireFox, support the touch-action property. This property tells the browser how to handle touches on an element. It improves the detection and experience of the gestures a lot, because it can prevent scrolling of the page without any JavaScript has to be executed, which can be too late in some cases.

Hammer uses a javascript fallback for this property when needed, so it is working with non-supporting browsers too. Still, on some (unpopular) devices the fallback might not work as good as the native support.

So i fixed scroll by manually adding touch-action: pan-x via jQuery to the required element on pan event.

Also this example is not prefect. Because the behaviour of how exactly must be done interaction with mobile gestures depends on developer preferences. In my example i decided to use approach like first tap is opening zoom, then pan available to move image inside zoom area and then second tap will close zoom.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/payalord/xZoom/issues/50#issuecomment-410496529, or mute the thread https://github.com/notifications/unsubscribe-auth/AVlmwSHg2pl0qlvNCFfVsbv4W3ts-fn5ks5uNn-vgaJpZM4VfWvg .

-- Alexander Dean ExpatTech Development Services Budapest, Hungary www.expattech.com +36 1 215 1143

[payalord]

I assume that issue is fixed.

[Budapresst]

Thank you! FIXED!

Alexander Dean ExpatTech Development +36 20 227 6335

On Fri, 17 Aug 2018 18:57 Azat Ahmedov, notifications@github.com wrote:

I assume that issue is fixed.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/payalord/xZoom/issues/50#issuecomment-413926830, or mute the thread https://github.com/notifications/unsubscribe-auth/AVlmwY3DbVYoRSUC892yLYFoXRzQAkxxks5uRvXtgaJpZM4VfWvg .

[pflind]

@payalord and @Budapresst, it looks like this fix does not work on Android, only iOS. I tested with Chrome 42 under an older Android version. Zoom is initiated but you can't see the lens or move the lens around, it is stuck in the top left corner.

[payalord]

Must be new version of hammer.js not working on old version of chrome. Need test with hammer.js v1.