Opened 7 years ago

Closed 6 years ago

#17164 closed defect (fixed)

Transition issue on some Android 4.1.x devices

Reported by: richyevans Owned by: Sebastien Pereira
Priority: undecided Milestone: 1.9.2
Component: DojoX Mobile Version: 1.9.0
Keywords: Cc: cjolif, Patrick Ruzand
Blocked By: Blocking:

Description (last modified by Sebastien Pereira)

On some android devices running Android 4.1.x certain transitions are not working. This problem has been reported on Samsung Galaxy SII (GT-9200) with Android 4.1.2, Samsung Galaxy SIII (GT-9300) with Android 4.1.1 and 4.1.2, Samsung Galaxy Tab 2 10" with Android 4.1.1.

Also reported in #17265.

Original report:

I've created a simple jsfiddle to demonstrate this problem. If it works you should be able to transition back and forth from the Home to Away views.

http://jsfiddle.net/monkeybrains/StRSU/1/

Samsung S2 Android 4.1.2

Dojo 1.7.4 Does work Dojo 1.8.4 Does work Dojo 1.9.0 Does not work Dojo nightly (as of today) does not work.

Attachments (2)

css3.patch (1.2 KB) - added by tommahieu 7 years ago.
dojox/mobil/_css3.js patch to check for Galaxy S2
t17164.patch (1.3 KB) - added by Sebastien Pereira 6 years ago.
Fixes style 'transition' returning an empty string instead of undefined although TransitionEvent? is not supported. Sebastien Pereira (IBM CCLA).

Download all attachments as: .zip

Change History (18)

comment:2 Changed 7 years ago by Patrick Ruzand

Owner: changed from Eric Durocher to Patrick Ruzand
Status: newassigned

comment:3 Changed 7 years ago by tommahieu

I could indeed reproduce this problem as well on a Samsung Galaxy S2 running Android 4.1.2. A Google Nexus (also by Samsung) with the same Android version does not have this problem.

I did some debugging to figure out what was going on, and found out that the dojox/mobile/View's onAnimationEnd() is not being executed on that device. onAnimationEnd() sets the display CSS property on a dojox/mobile/View's DOM node to determine its visibility. This property is also used to find out what View is currently visible and that's the main reason why the transitions go wrong: from the point of view of dojox/mobile, the wrong view is visible: the view that was first shown was visible and is always visible (its display property is never set to 'none').

The reason onAnimationEnd() is never called on a View is due to a regression. onAnimationEnd() is triggered when the "transitionEnd" event is fired on the View's domNode. In dojo 1.8 and earlier, the event name for "transitionEnd" was fixed at "webkitTransitionEnd". In dojo 1.9, the names are calculated in dojox/mobile/_css3. The name that will be used to connect to the event is calculated based on the availability of the "transition" CSS style property in the browser you're running on. A Nexus phone with Android 4.1.2 doesn't have that style property, so the event name is calculated to be "webkitTransitionEnd", which works (same behavior as in 1.8). A buggy Galaxy S2, tells us that the "transition" property exists, so dojo's dojox/mobile/_css3 module assumes that the 'official' "transitionend" event name will work. However, it doesn't: in this particular case we should still use webkitTransitionEnd.

Anyway, I've added a patch which checks for this particular browser and tests for the availability of prefixed CSS properties (in this case "webkitTransition", which exists on the Galaxy S2). I don't feel too comfortable with this fix though, because it's too specific for the Galaxy S2. There exist a number of derivates of the Galaxy S2 (see http://en.wikipedia.org/wiki/Samsung_Galaxy_S_II), which may or may not use the same webkit build. I don't have access to these devices so I can't test it. A better solution, IMO would be to test only for Android version 4.1(.2) and use webkit prefixed names on all phones that run that version, even the phones that don't suffer from this bug. To me this sounds more pragmatic, as the browsers that don't have the bug also support the webkit prefixed event names, so they won't pose a problem anyway.

Changed 7 years ago by tommahieu

Attachment: css3.patch added

dojox/mobil/_css3.js patch to check for Galaxy S2

comment:4 Changed 7 years ago by scprogdocs

I have seen this on both the Samsung Galaxy Note 2, and the Samsung Galaxy S3, both when running Android 4.1.2. I am getting around this by extending the reach of the check in your patch, but this problem does expand past the one device originally mentioned.

Last edited 7 years ago by scprogdocs (previous) (diff)

comment:5 Changed 7 years ago by cjolif

Cc: cjolif added

comment:6 Changed 7 years ago by cjolif

tommahieu, do you have signed a Dojo CLA (http://dojofoundation.org/about/cla)? Thanks.

comment:7 Changed 6 years ago by tommahieu

cjolif, that should be ok. We've signed a corporate CLA about 1 or 2 years ago. Let me know if you want more details.

Last edited 6 years ago by tommahieu (previous) (diff)

comment:8 Changed 6 years ago by Sebastien Pereira

tried to reproduce on Galaxy SIII (GT-I9300) stock browser with Android 4.1.2. On both cases transitions are ok:

http://jsfiddle.net/fdlane/7kmuG/ => ok http://jsfiddle.net/monkeybrains/StRSU/1/ => ok

I also tested transition events and CSS properties:

console.log("transition-property: " + domStyle.get("group1","transitionProperty"));
console.log("-webkit-transition-property: " + domStyle.get("group1","webkitTransitionProperty"));
console.log("WebKitTransitionEvent: " + ('WebKitTransitionEvent' in window));
console.log("TransitionEvent: " + ('TransitionEvent' in window));

Both CSS property -webkit-transition-property and event WebKitTransitionEvent? are supported by android 4.1.2 stock browser on the Galaxy SIII.

comment:9 Changed 6 years ago by Sebastien Pereira

Description: modified (diff)
Owner: changed from Patrick Ruzand to Sebastien Pereira
Summary: Certain transitions not working with Android 4.1.2 Samsung S2 deviceTransition issue on some Android 4.1.x devices

comment:10 Changed 6 years ago by Sebastien Pereira

Cc: Patrick Ruzand added

comment:11 Changed 6 years ago by Sebastien Pereira

Description: modified (diff)

comment:12 Changed 6 years ago by Sebastien Pereira

#17265 is a duplicate of this ticket.

Changed 6 years ago by Sebastien Pereira

Attachment: t17164.patch added

Fixes style 'transition' returning an empty string instead of undefined although TransitionEvent? is not supported. Sebastien Pereira (IBM CCLA).

comment:13 Changed 6 years ago by Sebastien Pereira

I successfully reproduced the issue on Galaxy Tab 2 10" running Android 4.1.1. The issue was caused by the "transition" being defined, while TransitionEvent? not supported. It results to a bad name of the event being used to catch the end of the first transition. The event is never fired and when the second transition starts, the first view is still considered as the current view, so the transition can not be done.

comment:14 Changed 6 years ago by Sebastien Pereira

Milestone: tbd1.9.2

comment:16 Changed 6 years ago by Patrick Ruzand

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