PhotoSwipe
PhotoSwipe copied to clipboard
dimsemenov
Crazy behaviour in zoom mode in Safari ios 15
Photoswipe version 4.1.x (not sure which one is on the demo page). After updating to ios 15 strange behavior is noticed in zoom mode in safari. Zoom is not stable and just closes the zoom or moves to another slide after 1) zooming in and 2) trying to move the picture with a finger. Before the update all worked fine. In chrome ios all worked fine.
See the photoswipe demo page demonstrated on video.
Chrome works as it should: https://youtu.be/E-ZIi2lTYfM Safari does not work: https://youtu.be/stcziG4Nl6M
Demo page V5 seems not to have this kind of bug.
It's fixed in v5 recently, might be fixed in earlier versions too if I find a way.
iOS15 Safari triggers toolbars on any vertical drag, which triggers resize event. The problem is you can't preventDefault() or do anything to stop this action.
As another solution, you may hide all page content when PhotoSwipe opens, which eliminates scrolling and at the same time toolbar behavior.
Will you please advise the best method to hide the page content on safari?
Here is the code for v5 https://gist.github.com/dimsemenov/0b8c255c0d87f2989e8ab876073534ea , you may adjust it for earlier versions.
In v5 moving horizontal a zoomed image makes moving a little bit the toolbar. While moving vertical makes appear/disappear the toolbar at all. At the moment is there a way to solve both? Thanks
The best solution I've found so far is in the gist, but it's still far from perfect.
It partly uses a technique from here https://pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari/
If you'll manage to find something better - please let me know.
No, it's unlikely that I'll add it in the core, it might break sites. You'll need to add it manually and test it.
I might release it as a plugin though.
Works like a charm with photoswipe 4.1.3, slightly modified though. Coupled also with the royalslider.
It works on Safari though. Chrome on ios also has a bottom toolbar which disappears on scroll up, and in this case the image in fullscreen is not vertically centered. How to detect safari only on ios?
Hi @ae202652 Would you please share your fix for v4.1.3? I tried a suggested solution from https://gist.github.com/dimsemenov/0b8c255c0d87f2989e8ab876073534ea but it didn't work for me on iOS 15...
@Dmitry2703, please have a look at my website, furulundjordet10c.no, for details of the fix. Photoswipe is combined with the RoyalSlider there. I'm a little busy now to give you a specific answer, if you can't figure out from my code, let me know and I'll give the answer about the fix.
Sorry, but the code is not refactored yet, so may be difficult to read.
I use 4.1.2 by the way, noticed that 4.1.3 has something which is not working, like close on mouse scroll if I'm not mistaken...
Hi @ae202652 , Thanks a lot for your quick answer! From my testing on browserstack on iOS15.0 your slider doesn't work on iPhone... When I try to double tap on image it doesn't zoom. Maybe it works on real device or on iOS15.1 but unfortunately I don't have a real device.
Hi, @Dmitry2703, on iphone it works as it should on ios 15.1.
Screen Capture of behaviour https://youtu.be/AouKiSe0wp0