1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default Unanswered: Is this a bug? TitleBar font renders differently when active item changes.

    Unanswered: Is this a bug? TitleBar font renders differently when active item changes.


    Hello,

    I noticed this weird thing with the titlebar's font.

    I have a titlebar and some containers tucked into a card layout for display. For simplicity, it's a blank app, no content in the containers.One of the items is an empty container, the other is a blank carousel containing 2-3 blank containers that we can swipe through. (Not really important for this demo.)

    For this simple demo, I added two buttons in the titlebar so you can switch card layouts. One displays the empty container, and the other switches the active item over to the carousel. Now here comes the odd part.

    Pay attention VERY CLOSELY to the font display of the titlebar. When the 1st item is being displayed (just an empty container), the font is THICKER! When you switch over to the carousel (press the 'Item 2' button) the font renders thinner.

    I have included two screenshots using Windows' Magnifier tool so you can see the result closer. This effect is more/less noticable depending the device and font you use.

    Using thinner serif fonts makes it VERY noticable running on the iPad with iOS 5.1 or 4.3.5. It's as if you are switching from a bold to a normal font. In my real app, I'm using the font Archer, and the effect is very noticable.

    Another interesting thing to note, that the font's "slimmer" effect only happens if you switch to an item, that happens to be more "complex" in nature (not sure how to phrase it). Eg, if you switch to a carousel, or a google map, the font renders as if it gets thinner. If you activate an item which is just a plain container, the font renders bolder. On a monitor (and on the attached screenshots) it seems as if the antialiasing changes. But on an iPad it's a very different effect and more pronounced using serif fonts.

    I was debugging my app for hours trying to find out what the hell am I doing. Finally, I created a very basic test app. It still shows.

    Is this a bug?

    Sencha Touch 2.0.1.1
    Windows 7 x64
    iOS 5.1 (iPad 3) and 4.3.5 (I believe) using iPad 2

    Enclosed magnified screenshots. Look at the antialiasing difference on the title "Title Oddness." Oddly, the buttons are also using the same font (but smaller) and it is NOT showing there. It's only on the titlebar's title.

    item1.jpg

    item2.jpg


    Here's the simple code. You can just copy/paste to run it and observe on an iPad (or even on a monitor).

    Code:
    Ext.application({
        name: 'Test',
    
    
        launch: function() {
            var titlebar = Ext.create('Ext.TitleBar', {
                title: 'Title Oddness',
                style: 'font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-weight: bold;',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: 'Item 1',
                        handler: function() {
                            main.setActiveItem(0);
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Item 2',
                        handler: function() {
                            main.setActiveItem(1);
                        }
                    }
                ]
            });
    
    
            var container1 = Ext.create('Ext.Container', {
                style: 'background-color: green',
                styleHtmlContent: true,
                html: 'Green panel'
            });
    
    
            var carousel = Ext.create('Ext.Carousel', {
                items: [
                    {
                        xtype: 'container',
                        style: 'background-color: green'
                    },
                    {
                        xtype: 'container',
                        style: 'background-color: red'
                    },
                    {
                        xtype: 'container',
                        style: 'background-color: brown'
                    }
                ]
            });
    
    
            var main = Ext.create('Ext.Container', {
                layout: 'card',
                fullscreen: true,
                items: [titlebar, container1, carousel]
            });
    
    
            Ext.Viewport.add(main);
        }
    });

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    I've also noticed small 'shifts' in text on buttons when tapping on them. I haven't come across any known reasons for this.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    crfr is on a distinguished road

      0  

    Default


    I have been battling this issue too. What's interesting is that if you check the css in the inspector it doesn't show any difference between a "regular" rendered title and a "thick" rendered title; all properties are the same. It's also browser independent because it happens in Chrome, Safari, and also in the iOS simulator and resulting app. It's very annoying and basically gives the app an unprofessional, very non-native, appearance. I certainly hope this gets fixed because I don't dare to publish an app like this.

    One thing I noticed is that upon initial render it seems correct and then a fraction of a second later it turns "thick". Almost like a bold effect is applied to an already bold font.

Thread Participants: 2

Tags for this Thread