TitleBar title bounces in Touch 2.1

[rutzmic]

Hi,

i have a Ext.NavigationView with a Navigationbar config like this:

Ext.define('MyNaviView', {
   extend: 'Ext.NavigationView',
   config: {
      navigationBar: {
            backButton: {
                ui: false
            },
            items: [
                {
                    align: 'left',
                    text: '--',
                    showAnimation: {
                        type: 'slide',
                        direction: 'right',
                        duration: 150
                    }
                },
                {                    
                    iconAlign: 'left',
                    hidden: true,
                    showAnimation: 'fadeIn',
                    text: 'some text'
                }
            ]
        }
   }
});

Since i have upraded from ST 2.0.1.1 to 2.1, the Title bounces a bit to the right every time i push a view and the view`s title is wider then the viewport. After this bounce, the title does not really fit anymore.
The image below shows the Toolbar after the bounce.
The image is as wide as the viewport and it looks the same on Chrome (Desktop), Safari (iOS 5) and native Android 4.
ugly_toolbar.JPG

I have to say that i need to toggle the visibillty of the 2 buttons, but only if the root view is displayed.
This toggle is triggered by my Controller.
But it does not look like it makes a difference if i remove those 2 extra buttons.
I`ve some custom styling applied, but removing it makes no difference even.
The App is still working, but it looks "ugly", mostly because the bounce happens a blink after the new view slides in and the title does not fit.
Is there a Workaround? Does anyone else having this issue?

Regards!

==============================
UPDATE!
==============================

just doubled checked this behaviour by editing the example in the docu.
Edit the title for the second view to something very long which does not fit the viewport and you can reproduce it.
http://docs.sencha.com/touch/2-1/#!/...avigation.View

[rutzmic]

Just doubled checked this behaviour by editing the example in the docu.
Edit the title for the second view to something very long which does not fit the viewport and you can reproduce it.
http://docs.sencha.com/touch/2-1/#!/...avigation.View

So to me this definitly looks loke a bug!

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[Sheldor]

If needed: just another demonstration for the bug http://jsfiddle.net/Sheldor/KJUmC/

A workaround is to disable the animation in the titlebar:

navigationBar : {
        animation: false
}

(thanks to jamezilla).

[Websteria]

This is an example from an iPhone compiled app showing the same behavior:

http://www.eberlin.net/sencha/NavigationBarTitled.m4v

[bjudson]

Thanks for posting that video, Websteria. Any progress on resolving this? The workaround (turning off title bar animation) is really not a great solution.

[cwelk]

I've found the reason and a solution that works for me.

After the title animation ends the translateX property should be reverted to 0 and the left property should be set to the value translateX had before.

But instead only the left value is added, which causes the bounce of the title once the animation is through.

Fix would be:
In Sencha Touch 2.1.0, Class File of "Ext.navigation.Bar", function "doChangeView", line 275:

            me.animate(titleElement, titleProps.element, function() {
                titleElement.setLeft(properties.titleLeft);
                // fix for "TitleBar title bounces in Touch 2.1"
                titleElement.dom.style.setProperty('-webkit-transform', 'translateX(0)', 'important');


                me.isAnimating = false;
            });

(Of cource it would be nice to not explicitly mention the webkit prefix.)

[coreybanks]

The above mentioned fixes don't appear to work for me. My Title Bar still bounces around when I push and pop the display. It's even worse as I have either a Back or a "Reload" button on the right, and it has a hard time working out where center is at times. Perhaps it's because I have an Image (logo) in the title bar and the above fixes wont work, but if I try them then the logo creeps to the left until it's off screen!

So... how can I get it to work out center before running the animation, or is there a better fix on the way and I just have to live with the jerky title bar for now?