demos/touch: the slider is nearly unusable on mobile devices

[Adrian Vasiliu]

Below a (rotatable) pie chart, demos/touch shows a dijit.form.HorizontalSlider? to allow to rotate the chart. Now, in Dojo 1.8, the slider works fine on desktop browsers, but is nearly unusable on mobile devices (touch-enabled browsers). This works much better in Dojo 1.7.3, so it seems a regression in Dojo 1.8.

How to reproduce:

1. Launch demos/touch/demo.html on any mobile device (tested on iPhone 4S iOS 5.0.1 and Samsung Galaxy Tab Android 2.2).
2. Touch the slider's knob to change the value.

=> In Dojo 1.8, this works 2 or 3 times, then stops working (the knob doesn't move) despite many attempts to touch the knob precisely. After many attempts, it works for a few times again, then stop working again and so on.

For dijit's slider, some ergonomy issues when running on mobile devices are limitations that can be also be seen with dijit/tests/test_Slider.html for instance. In particular, the sensitivity area around the slider is a bit small, the user needs to touch it quite precisely. However, in test_Slider.html it is still usable, while in demos/touch it is nearly unusable.

This trouble is specific to demos/touch and appears to be due to a z-ordering issue: the piechart being a css-rotated div, it can overlap (in an invisible manner) the slider thus trapping the events. The z-order was already used for dealing with this issue, but it was used on the parent div of the slider, instead of the slider itself, and the z-index is NOT inherited from parent by default.

On the longer run, I think it would rather make sense for demos/touch to use dojox/mobile/Slider instead - given that the mobile devices are the main target of touch-enabled apps, using the specialized widgets for this platform sounds logic.

Anyway, for now I attach a fix proposal for the current demo (tested okay on the two mobile devices mentioned above).

Side note, in demos/touch it is also not possible to move the knob (change the value) by touching/clicking somewhere along the slider but outside the knob. The attached patch also includes the activation of this feature (clickSelect at true on the slider widget).

[Adrian Vasiliu]

Fix misbehavior of slider (z-ordering issue) - Adrian Vasiliu, IBM, CCLA

[bill]

It's weird, it seems like according to ​https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index%2FThe_stacking_context the Slider should "assimilate" the stacking context of the parent.

Is there a general issue where sliders don't inherit the z-index of their parent? If so perhaps the change should be made in dijit.css itself... although it is really a corner case.

[Douglas Hays]

The demo should be using dojox/mobile/Slider which has an additional attribute called halo that makes it easier to touch the small slider handle that fixes this specific problem. I don't think there's an issue with z-index inheritance.

[Adrian Vasiliu]

Fine, then I will work ASAP on a patch using dojox/mobile/Slider.

Concerning the z-index issue, well, did you run comparatively with and without my patch for the z-index? In my eyes, on the devices I've tested, the improvement is quite obvious. But the specialized slider should perform even better.

[Adrian Vasiliu]

Fix misbehavior of slider on mobile by using the Slider from dojox.mobile instead of dijit's one. Variant for the Dojo 1.8 branch. Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

Fix misbehavior of slider on mobile by using the Slider from dojox.mobile instead of dijit's one + a few cosmetic changes (more AMD syntax, code formatting). Variant for the Dojo trunk. Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

With the attached patches, slider's trouble on touch-enabled (mobile) devices goes away. I tested on: iPhone 1 iOS 4.3.3, iPhone 2 iOS 5.0.1, iPad 1 iOS 5.0.1, Samsung Galaxy Tab Android 2.2, HTC Desire Android 2.2, Samsung Galaxy SIII Android 4.0.4, HTC One X Android 4.0.3. Note that the demo still uses dijit/form/HorizontalRule and dijit/form/HorizontalRuleLabels, for which there are no dojox.mobile equivalents.

That said, while testing the slider, I discovered another issue in this demo, which seems due to dojox/gesture. This is about the rotation by multi-touch which is broken on Android devices which are supposed to support it. I reported it in a separate ticket: #15892 .

[cjolif]

In [29581]:

refs #15834. Fix misbehavior of slider on mobile by using the Slider from dojox.mobile instead of dijit's one + a few cosmetic changes (more AMD syntax, code formatting). Variant for the Dojo trunk. Thanks Adrian Vasiliu, IBM, CCLA

[cjolif]

In [29582]:

refs #15834. Fix misbehavior of slider on mobile by using the Slider from dojox.mobile instead of dijit's one + a few cosmetic changes (more AMD syntax, code formatting). Variant for the Dojo trunk. Thanks Adrian Vasiliu, IBM, CCLA