Trying to get the touch support useable...

Webix JS
1

Hi there,

I am trying to get touch support working for windows, android and ios devices but at some point it always fails. You can use your own “desktop demo” to see the problem. Here are the behaviours I got so far:

Setup:
webix.env.touch = true
OS: Window 8+10,
Browsers: Chrom + IE (latest)

Desktop (no-touch):

  • Y-scrolling broken (no y-scrollbars, no function)

Touchscreen:

  • unable to move or resize windows
  • Y-scrolling broken (no y-scrollbars, no function)

Same as 1) but in browsers fullscreen mode

Desktop (no-touch):

  • Y-scroling using mousewheel fails (required moving content)

Touchscreen:

  • Y-scrolling works using touch
  • Y-scrolling fails using mousewheel or moving content
  • Resizing and moving of windows works as expected

Same as 1) but webix.env.touch = false

Desktop (no touch):

  • Everything works as expected

Touchscreen:

  • On some operations “Removing non-existing event” error is sown
  • Unable to resize or move windows (works in some areas and ghost shows other dimension but above error message is shown)
  • Y-scrolling works using touch and mouse
  • Hover popups (ie the collapsed sidebar menu) fail (nothing shown)

Same as 3) but in in browsers fullscreen mode

Desktop (no touch):

  • Everything works as expected

Touchscreen:

  • Hover popups (ie the collapsed sidebar menu) fail (nothing shown)
  • Everything else looks good

Same as 4 but with CustomScroll:

Desktop (no touch):

  • Everything works as expected

Touchscreen:

  • Not useable (requires touching the scrollbar area)

So the best I got so far is 4). I guess that I can work around the hover popup problem but I can’t tell users the app is only working in fullscreen mode. Now I am wondering what’s so different between fullscreen mode and normal window mode beside the fact that there is more space to fill?

Any ideas? Something I am doing wrong?

2

First of all, webix.env.touch sets automatically depending on the device type (touch or not). We do not recommend to change it, and that’s the reason of the most of these issues.

The customScroll was designed for desktop devices. The proper way to enable it is

if (!webix.env.touch)
    webix.CustomScroll.init();

Touch scroll looks the same and becomes visible only while scrolling.

As far as I can see, there’s no difference between the fullscreen/default browser modes. But, unfortunately, if you’re trying to test it on a touch laptop, there could be issues. We’ll consider the conjunction of the touch/basic behavior for the hybrid devices.