PDA

View Full Version : [FIXED] TitleBar title bounces in Touch 2.1



rutzmic
20 Nov 2012, 5:48 AM
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.
40205

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/#!/api/Ext.navigation.View

rutzmic
20 Nov 2012, 6:19 AM
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/#!/api/Ext.navigation.View

So to me this definitly looks loke a bug!

mitchellsimoens
20 Nov 2012, 6:24 AM
Thanks for the report! I have opened a bug in our bug tracker.

Sheldor
20 Jan 2013, 7:36 AM
If needed: just another demonstration for the bug http://jsfiddle.net/Sheldor/KJUmC/

A (http://jsfiddle.net/Sheldor/KJUmC/) workaround is to disable the animation in the titlebar:

navigationBar : {
animation: false
}
(thanks to jamezilla).

Websteria
11 Feb 2013, 9:22 AM
This is an example from an iPhone compiled app showing the same behavior:


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

bjudson
12 Feb 2013, 2:05 PM
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
20 Feb 2013, 7:38 AM
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
14 Mar 2013, 10:42 PM
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?