worka / vanilla-js-wheel-zoom

Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
https://worka.github.io/vanilla-js-wheel-zoom
MIT License
160 stars 30 forks source link

Demo samples it appears that none of them work appropriately on Safari mobile (at least >=15.7) #51

Open Oleksandr-Dubiv opened 1 month ago

Oleksandr-Dubiv commented 1 month ago

Thanks for the lib!

But when I try all your demo samples it appears that none of them work appropriately on Safari (at least >=15.7) mobile when I try to zoom in\out with pinch. It zooms in\out whole page or I see constant glitches while it conflicts with page\image zooming. It works well on Android though. Tried to do my vanilla test from scratch - it's the same. I see you added meta tags on every demo page user-scalable=0 (or 'no') but 1) that's not a good user experience to do that for the whole webpage nowadays 2) seems like Safari does not respect this param anymore (from reason no 1). Is there something I missing (I dont see any other complains in issues about that) or it's something that is unfortunately changed and needs to be fixed? Any idea how? Thanks

worka commented 1 month ago

Oh oh...

After the death of IE, now the worst browser is Safari)))

Try using maximum-scale=1.0 and minimum-scale=1.0 instead of user-scalable=no

Or try disabling scaling with js:

// new safari
document.addEventListener('gesturestart', function(event) {
  event.preventDefault();
});

// old safari
document.addEventListener('touchmove', function(event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

if you manage to solve this problem, please describe in detail what helped you so that other people could use it, if it doesn't work - we'll think further)