search

jarvisniu / vue-zoomer

Zoom the image or other thing with mouse or touch
MIT License
150 stars 37 forks source link

Chrome on Windows support and Firefox #8

Closed tinco closed 5 years ago

tinco commented 5 years ago

Hi, thanks for the neat project component :) I noticed it only works on Chrome on MacOS, not on Chrome on Windows, nor on Firefox. Do you have any plans on making it more cross platform?

jarvisniu commented 5 years ago

Sorry for not testing on Firefox. And yes, I found an issue that you can't drag the image with mouse. You can temporarily solve this issue by adding a global style .vue-zoomer .zoomer img { pointer-event: none; }

And is there any other issue? I don't see any of Chrome on Windows. Can you describe it?

tinco commented 5 years ago

Thanks! The problem with Chrome on Windows is that there's some weird scrolling behaviours. I think it might be unsolvable because there's a bug in Chrome on Windows that it ignores configuration for its pinch to zoom behaviour. I'm not sure how things like Google Maps deal with it. I have to research a bit further, maybe it's just some other aspect of my app that's breaking it. There's two things that happen in Windows for us. One is that if the user uses pinch to zoom on the background instead of on the Window, then it will zoom the entire app instead of the picture, the other is that scrolling scrolls other elements on the app as well, but that might be some bug I introduced myself.

jarvisniu commented 5 years ago
  1. Pinch to zoom the background: You may need this viewport setting in your <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> NOTICE: the last two are important maximum-scale=1.0, user-scalable=no
  2. Scroll other elements: You may need to add style overflow: hidden; to the container element. Or in my usual way, add height: 100%; starting from html, body, all the way down to the container element.