webkitTransitionEnd didn't trigger in time

[jaypeeZero]

I've added a "Tab Bar" to my project and it has introduced a bug. Let's take for example a Tab Bar like this:

• Home
• Notes
• Tasks

Home and Notes are a single page. Tasks has a button to "View Task" which takes you to a second View (ViewTask).

When any Tab Bar item is clicked, I want the StackNavigator.viewsStack to have only the new page in it. If you are on "Notes" and click "Home", when the page shows ONLY "Home" should be in the viewsStack.
I accomplished this with a simple piece of code:

while(stackNavigator.viewsStack.length > 2) {
                var item = stackNavigator.viewsStack.pop();
            }

I used "length > 2" because there seems to always be a null instance at viewsStack[0] so this would leave at least 1 item there (the current View) before calling replaceView to switch to the new View.

Functionally, it works perfect, except if I am 2 Views deep (say inside Tasks --> ViewTask) the current View (ViewTask in this case) doesn't go away, the new View just renders over the top of it and Console displays the error "webkitTransitionEnd didn't trigger in time".

If I use popAll() or replaceAll() I get an error about "cannot call method 'trigger' of null" at Backstack line 606.

[chewiebrian]

Hi, I am suffering the same error you mention when using replaceAll(). It seems that there is a problem when removing instances from the stack. I have solved it with this snippet, starting line 634:

               if (remove != null) {
                    _.each(remove, function (ref) {

                        if (ref.instance) {
                            // Triggering viewDeactivate event
                            createEvent('viewDeactivate', {target:ref.instance}).trigger(ref.instance);

                            if (ref.instance.destructionPolicy == 'never') { // Detaching if destructionPolicy == 'never'
                                ref.instance.$el.detach();
                            } else { // Removing if destructionPolicy == 'auto'
                                ref.instance.remove();
                                ref.instance = null;
                            }
                        }
                    }, this);
                }

Note the 'if (ref.instance) { ', that prevents triggering events on already removed view instances.