Swipe (snap) on Chrome for Android seems to be broken

[Erwol]

Hello everybody,

I'm using epub.js 0.3.88 with snap: true (https://github.com/futurepress/epub.js/blob/master/examples/swipe.html).

Snap works; you can swipe left and right and pages change in the correct order. But rendition.on('relocated') is called randomly. Using chrome for desktop (emulating a mobile screen), every time a swipe occurs, relocated is called. However in a real device this occurs randomly. relocated could be triggered after the first swipe or after the 5th. This makes it hard to keep track of which page the user is currently in, since I was using the location emitted by relocated in order to get this data.

Did someone else run into this issue? Any workarounds?

Thanks!

• epubjs 0.3.88
• chrome version: 93.0.4
• android 11

[ompurwar]

did you find any solution?

[fayis672]

Any update on this?

[fayis672]

I found a solution to this issue, it's not perfect but it works. The idea is to implement your own swipe callback using hooks and call prev() and next() functions on swipe, this will trigger onrelocated callback

Note: You need to set snap:false

 rendition.hooks.content.register((contents) => {

        const el = contents.document.documentElement;

      if (el) {
        console.log('EPUB_TEST_HOOK_IF')
       detectswipe(el, function(el,direction){

        if(direction == 'l'){
          rendition.next()
        }
        if(direction== 'r'){
          rendition.prev()
        }
      });
      }
  });

function detectswipe(el,func) {
      swipe_det = new Object();
      swipe_det.sX = 0;
      swipe_det.sY = 0;
      swipe_det.eX = 0;
      swipe_det.eY = 0;
      var min_x = 50;  //min x swipe for horizontal swipe
      var max_x = 40;  //max x difference for vertical swipe
      var min_y = 40;  //min y swipe for vertical swipe
      var max_y = 50;  //max y difference for horizontal swipe
      var direc = "";
      ele = el
      ele.addEventListener('touchstart',function(e){
        var t = e.touches[0];
        swipe_det.sX = t.screenX; 
        swipe_det.sY = t.screenY;
      },false);
      ele.addEventListener('touchmove',function(e){
        e.preventDefault();
        var t = e.touches[0];
        swipe_det.eX = t.screenX; 
        swipe_det.eY = t.screenY;    
      },false);
      ele.addEventListener('touchend',function(e){
        //horizontal detection
        if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y)))) {
          if(swipe_det.eX > swipe_det.sX) direc = "r";
          else direc = "l";
        }
        //vertical detection
        if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x)))) {
          if(swipe_det.eY > swipe_det.sY) direc = "d";
          else direc = "u";
        }

        if (direc != "") {
          if(typeof func == 'function') func(el,direc);
        }
        direc = "";
      },false);  
    }