Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#17814 closed defect (fixed)

Calendar: clicking months/days momentarily highlights wrong node (iOS 6.0.3) (iPad mini)

Reported by: Sebastien Brunot Owned by: Bill Keese <bill@…>
Priority: undecided Milestone: 1.10
Component: Dijit Version:
Keywords: Cc:
Blocked By: Blocking:

Description

Using the master branch of dijit to test on an iOS 6.0.3 Ipad mini, I found the following issues with test page test_Calendar.html:

  • click on the month to display the list of monthes. Select December: "October" is highlighted, and then the list close and Septembre is correctly selected.
  • click on march 12 2008 to select it in the second calendar: a different day is highlighted during the selection (April 3th).

Change History (5)

comment:1 Changed 5 years ago by bill

click on the month to display the list of monthes. Select December: "October" is highlighted, and then the list close and Septembre is correctly selected.

I think you meant to say the *December* is correctly selected? I do see it momentarily highlighting the wrong item in the drop down (one item before what I clicked).

click on march 12 2008 to select it in the second calendar: a different day is highlighted during the selection (April 3th).

I see it, except that clicking 12 highlights 5, and clicking 10 highlights 3, etc. Same as first problem but a simpler test case since there's no drop down involved.

Last edited 5 years ago by bill (previous) (diff)

comment:2 Changed 5 years ago by bill

The momentary highlight effect (on the wrong month in the drop down) happens from CSS, not javascript, specifically this rule:

.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
  border-color: #759dc0;
  border-width: 1px 0;
  background-color: #abd6ff;
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffffff , endColorstr= #abd6ff );
}

Note the :hover selector (note: added in aa02fc8effddc4ea8a218d832edeaeb8525f9951).

Not sure how best to fix this, or if I should bother. A related problem is that the highlight happens 300ms after touchend, presumably when the faux mousedown and mouseup events are generated. This is a suboptimal experience; it would be better if it happened during the touch.

comment:3 Changed 5 years ago by bill

Summary: dijit Calendar issues on iOS 6.0.3 (iPad mini)Calendar: clicking months/days momentarily highlights wrong node (iOS 6.0.3) (iPad mini)

See https://github.com/ftlabs/fastclick/issues/83; they also hit the problem, but no solution.

Last edited 5 years ago by bill (previous) (diff)

comment:4 Changed 5 years ago by Bill Keese <bill@…>

Owner: set to Bill Keese <bill@…>
Resolution: fixed
Status: newclosed

In ee57cb3cf176f651e03f06ef8fc037df05fbe728/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:5 Changed 5 years ago by bill

Milestone: tbd1.10
Note: See TracTickets for help on using tickets.