Inline Galleries & Vertical dragging (mobile) discussion

Per the FAQ, there is currently an issue with inline galleries, i.e. modal: false option. The reason given is that this feature “calls prevetDefault() on touch events”. I’m opening this issue to discuss in more detail why this happens and what our options are.

In my opinion, given the following options PhotoSwipe shouldn’t consume the vertical drag touch event, like it doesn’t consume the mousewheel scroll event:

options = {
    ...
    modal: false,
    closeOnVerticalDrag: false,
    closeOnScroll: false,
}

Example codepen: here. If you want to check mobile behavior you can switch your browser to “responsive” mode.

So modal: false means that the gallery is displayed inline and that the rest of the page should scroll normally, closeOnVerticalDrag: false means that if we swipe up the image it shouldn’t change PhotoSwipe’s behavior, and closeOnScroll: false means that when we use the scroll wheel over a PhotoSwipe item it shouldn’t alter its behavior. Correct me if I’m wrong, but the combination of those 3 settings means that PhotoSwipe should simply not do anything on vertical drags and/or scrolls.

By the way, @dimsemenov the inline gallery’s example codepen uses old photoswipe js/css settings which are no longer hosted so you might wanna update it.

[silentbugs]

After lots of hours of reading PhotoSwipe’s source as well as debugging, I’ve found a workaround for this issue.

As mentioned previously, working with the settings modal: false, closeOnVerticalDrag: false and closeOnScroll: false we expect PhotoSwipe to scroll vertically on mobile devices just like it does with the mousewheel. In the docs @dimsemenov mentions that you can listen to the preventDragEvent event and decide whether PhotoSwipe should call ‘event.preventDefault()’ on the current touch event. Always setting it to false should never consume any clicks from PhotoSwipe, and it doesn’t - yet mobile scrolling still wouldn’t work, as demonstrated on this codepen, even though as I understand with the current options and with never calling preventDefault my touches should go through.

After nearly disabling every single CSS rule on every single element, I found out that .pswp, .pswp__container and .pswp__zoom-wrap have the property touch-action: none which is similar to calling preventDefault on those elements and therefore the touches never propagated further in. So my final fix was to revert that rule in my CSS, as demonstrated on this functioning Codepen (make sure you either view it on mobile or have your browser in mobile mode).

I’m not sure if this is considered a bug or not, but if I understand things correctly when the options above, as well as possibly returning false on preventObj.prevent mobile touches should go through.

TL;DR Fix: yourJavascript.js

var options = {
      modal: false,
      closeOnScroll: false,
      closeOnVerticalDrag: false,
}

var pswp = new PhotoSwipe(...);

pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
    preventObj.prevent = false;
});

your-style.css

.pswp, .pswp .pswp__container, .pswp .pswp__zoom-wrap {
  touch-action: auto !important;
}

[untitledlt]

Your fix breaks swiping on IE11. Here is a fix to your fix 😃

pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
    preventObj.prevent = !('ontouchstart' in document.documentElement);
});