Sencha Touch version tested:
  • 1.0



Platform tested against:
  • iOS 4
  • Android 2.1
  • Android 2.2
  • Google Chrome 7.0

Description:
Test Case:
N/A. Basically, any transition (such as switching cards) should show the problem.

If you are unable to replicate it, please let me know and I will set up a test case.


Possible fix:
Patch provided below. NOTE: the fix also includes a null check in onTransitionEnd itself, which was another issue we were seeing.
Code:
--- Anim-1.0.js	2010-11-15 17:25:26.000000000 -0600
+++ Anim-Va.js	2010-11-23 15:10:07.310063900 -0600
@@ -199,7 +199,27 @@
                 after: after
             });
 
-            for (property in config.to) {
+            /**
+             * cdonnelly/dhawkins 2010-09-02:
+             * Because webkitTransitionEnd does not always seem to fire, we added a timeout 50ms longer than the actual event 
+             * that checks to see if the event was fired, and if not, it completes the work the event should have done.
+             * Should WebKit be fixed in the future, the setTimeout() can be removed 
+             * (or at least not invoked if there is a way to detect the "good" vs. "bad" WebKit version(s)).  
+             * 
+             * @see http://www.cuppadev.co.uk/quirks/the-trouble-with-css-transitions/
+             */
+            setTimeout(function () {
+                if (me.running[el.id]) {
+                    me.onTransitionEnd(null, el, {
+                        single: true,
+                        config: config,
+                        after: after
+                    });
+                    
+                }
+            }, config.duration + 50);
+
+            for (var property in config.to) {
                 if (!config.to.hasOwnProperty(property)) {
                     continue;
                 }
@@ -213,7 +233,7 @@
 
     onTransitionEnd: function(ev, el, o) {
         el = Ext.get(el);
-        var style = el.dom.style,
+        var style = (el.dom || {}).style, // cdonnelly 2010-10-19: el.dom could be null at this point.
             config = o.config,
             property,
             me = this;
@@ -439,4 +459,4 @@
             };
         }
     })
-};
\ No newline at end of file
+};