Interact.js: Chrome DevTools emulation issue

[mateop]

In chrome 56 while emulating a touch device the lib doesn't seem to work for me. Touch events dont get fired.
If emulation is disabled and on an actual device it works fine. It's not a big deal but but it's a pain while developing for mobile

[taye]

Which version of interact.js and what OS were you using?

I've tried v1.2.6/7/8 and unstable and I didn't see any problems with the responsive dev tools in Chrome for Linux.

[mateop]

Chrome on linux 56 (beta), works on firefox with touch emulation enabled, interactjs version 1.2.8 from npm. It might be a chrome beta bug,

[OriginalEXE]

Hi guys, I had the same problem, in fact, it didn't work for me on mobile devices at all (thought it worked on tablets).

The solution is to add this css touch-action: none; to the dragging container and all elements in it, for example:

.dragging-container,
.dragging-container * {
  -ms-touch-action: none;
  touch-action: none;
}

If you are not using autoprefixer, add the rule with the -ms- prefix as well like in the code above.

[rdicroce]

Same issue. Chrome 57, Windows 10, interact.js 1.2.8. The touch-action CSS does nothing for me.

When reproducing the problem, note that you MUST enable mobile emulation BEFORE loading the page. If you enable mobile emulation AFTER loading the page, it works fine.

[rdicroce]

Just tried this with latest from unstable branch. Doesn't work there either.

[rdicroce]

I've done some more digging into this and have discovered that this problem is mostly not interact's fault. There are at least two issues in play here:

1) When you activate mobile emulation, you can also pick a device to emulate. If you pick something like an iPad (which happened to be the default for me), Chrome will "helpfully" change its UA string. This trips up the hackfix for disabling PointerEvent usage (#457) since the UA string no longer contains "Chrome" which means interact doesn't work. Mobile emulation works fine as long as you pick a device that doesn't cause Chrome to fake a different UA.

2) Selenium's dragAndDrop Action works fine when mobile emulation is off, but not when it's on. I suspect this is a ChromeDriver bug in which the driver doesn't translate the WebDriver commands into appropriate events, but I've just been assigned a new project so I won't have time in the near future to investigate further.

[taye]

@rdicroce thanks for your sharing findings. The solution to this seems to be to avoid emulating devices with non-chrome UA strings.