Opened 7 years ago

Closed 7 years ago

#15834 closed defect (fixed)

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

Reported by: Adrian Vasiliu Owned by: cjolif
Priority: undecided Milestone: 1.8.1
Component: General Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description

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).

Attachments (3)

patch15834.patch (1.4 KB) - added by Adrian Vasiliu 7 years ago.
Fix misbehavior of slider (z-ordering issue) - Adrian Vasiliu, IBM, CCLA
patch15834-useMobileSlider-for-Dojo181.patch (3.5 KB) - added by Adrian Vasiliu 7 years ago.
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
patch15834-useMobileSlider-for-trunk.patch (5.1 KB) - added by Adrian Vasiliu 7 years ago.
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

Download all attachments as: .zip

Change History (11)

Changed 7 years ago by Adrian Vasiliu

Attachment: patch15834.patch added

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

comment:1 Changed 7 years ago by bill

Owner: set to Douglas Hays
Status: newassigned

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.

comment:2 Changed 7 years ago by Douglas Hays

Milestone: tbd1.8.1

comment:3 Changed 7 years ago by Douglas Hays

Owner: changed from Douglas Hays to cjolif

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.

comment:4 Changed 7 years ago by 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.

Changed 7 years ago by 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

Changed 7 years ago by 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

comment:5 Changed 7 years ago by 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 .

Last edited 7 years ago by Adrian Vasiliu (previous) (diff)

comment:6 Changed 7 years ago by 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

comment:7 Changed 7 years ago by 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

comment:8 Changed 7 years ago by cjolif

Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.