[OPEN-602] webkitTransitionEnd event does not always fire

[cdonnellytx]

Sencha Touch version tested:

• 1.0

Platform tested against:

• iOS 4
• Android 2.1
• Android 2.2
• Google Chrome 7.0

Description:

• The webkitTransitionEnd event does not always fire. While this is a WebKit bug, we have implemented a particularly successful workaround via setTimeout().
  
  The site http://www.cuppadev.co.uk/quirks/the...s-transitions/ discusses the problem in greater detail.

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.

--- 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
+};

[SimonFlack]

Thanks... Been debugging this for 2 days.

[benwhite]

I was able to correct this issue very easily...

Here are the two snipets of code I changed



Ext.Anim.run
from:

            // Bind our listener that fires after the animation ends
            el.on('webkitTransitionEnd', me.onTransitionEnd, me, {
                single: true,
                config: config,
                after: after
            });

to:

            // Bind our listener that fires after the animation ends
            el.on('webkitTransitionEnd', me.onTransitionEnd, me, {
                single: true,
                config: config,
                after: after,
                id: el.id
            });

Ext.Anim.onTransitionEnd
from:

        el = Ext.get(el);

to:

        el = Ext.get(o.id);

Hope this helps...