When using ui forward and back the buttons are not being rendered properly

[satnam]

Hi,

When using ui forward and back the buttons are not being rendered properly. please see attached file.

I'm using sencha 2.1.

Thanks,

Satnam.

[mitchellsimoens]

The forward for me doesn't look like that, it looks like the back only flipped with this code:

Ext.Viewport.add({
    padding : 50,
    items   : [
        {
            xtype : 'button',
            text  : 'Forward',
            ui    : 'forward'
        },
        {
            xtype : 'button',
            text  : 'Back',
            ui    : 'back'
        },
        {
            xtype  : 'toolbar',
            docked : 'top',
            items  : [
                {
                    xtype : 'button',
                    text  : 'Forward',
                    ui    : 'forward'
                },
                {
                    xtype : 'button',
                    text  : 'Back',
                    ui    : 'back'
                }
            ]
        }
    ]
});

Screen Shot 2013-01-15 at 9.59.05 AM.jpg

[satnam]

I've tried running your code under a brand new project and still get the same result. please see screen shot.

I'm using sencha-touch-2.1.0-commercial..

Thanks,

Satnam

[satnam]

Just noticed this seems to be happening on chrome canary and when I deploy the app on a ipad.. On a normal chrome browser (i.e. Version 24.0.1312.52 m) it works fine

[hawkinbj]

Confirmed here as well in both chrome and in phonegap

[sdebois]

forwardbuttonbroken.jpg

both in Sencha kitchen sink and my own app

[NineBerry]

Any news on how to work-around this bug?

[Surykat]

+1

It's a problem with webkit-mask-position.

In my case, adding following code in my custom css helps:

.x-button-forward:before, .x-button-forward:after, .x-toolbar .x-button-forward:before, .x-toolbar .x-button-forward:after {-webkit-mask-size: 0.80717em 1.8em;
}


.x-button-forward:before, .x-button-forward:after, .x-button-back:before, .x-button-back:after {
top: -0.05em;
-webkit-mask-position: 0.210em 0;
}


.x-button-forward:before, .x-button-forward:after, .x-toolbar .x-button-forward:before, .x-toolbar .x-button-forward:after {
top: -0.05em;
-webkit-mask-position: -0.210em 0;
}