Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-3735 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Vote Rating
    1
    rutzmic is on a distinguished road

      0  

    Default TitleBar title bounces in Touch 2.1

    TitleBar title bounces in Touch 2.1


    Hi,

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

    Code:
    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
    Last edited by rutzmic; 20 Nov 2012 at 6:23 AM. Reason: Update

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Vote Rating
    1
    rutzmic is on a distinguished road

      0  

    Default UPDATE

    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

    So to me this definitly looks loke a bug!

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,822
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
    Sheldor is on a distinguished road

      0  

    Default


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

    A
    workaround is to disable the animation in the titlebar:
    Code:
    navigationBar : {
            animation: false
    }
    (thanks to jamezilla).

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    111
    Vote Rating
    0
    Websteria is on a distinguished road

      0  

    Default Here's a visual demonstration

    Here's a visual demonstration


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

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

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    1
    cwelk is on a distinguished road

      0  

    Default


    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:

    Code:
                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.)

  8. #8
    Sencha User
    Join Date
    Feb 2013
    Location
    Sydney
    Posts
    2
    Vote Rating
    0
    coreybanks is on a distinguished road

      0  

    Default Any fix in the pipeline

    Any fix in the pipeline


    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?