iconMask in Android 2.0.3, small white border keeps visible

[warrean]

REQUIRED INFORMATION
Ext version tested:

• ST 2.0.1.1

Browser versions tested against:

• Android 2.0.3 <-- bug
• Android 4.0.4 <-- no bug

Description:

• The iconCls renders correctly, although a small white border keeps visible. Sometimes on the right, sometimes on the bottom.

Steps to reproduce the problem:

• Add the code at the bottom to the 'sencha app create test ..'-app
• build 'sencha app build production'
• run through the 2.03 Stock Browser

The result that was expected:

• a normal looking button on the left

The result that occurs instead:

• a white border at the right of the icon image

Test Case:

              {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [
                    {
                        xtype: 'button',
                        iconCls: 'info',
                        iconMask: true,
                        iconAlign: 'top',
                        text: 'Add Selected',
                        flex: 1
                    },
                    {
                        xtype: 'button',
                        iconCls: 'action',
                        iconMask: true,
                        iconAlign: 'top',
                        text: 'Add Other',
                        flex: 1
                    }
                ]
            }

HELPFUL INFORMATION
Possible fix:

• A fix for this problem is override the CSS Mixin for the picto's, in app.scss:

@mixin custom-pictos-iconmask($name) {  .x-tab .x-button-icon.#{$name},
  .x-button .x-button-icon.x-icon-mask.#{$name} {
    background-size: 95% 95%;
    background-color: transparent;
  }
}

@include custom-pictos-iconmask('info');

[mitchellsimoens]

Android 2.0.3 isn't a supported platform and this sounds like a browser issue not drawing the icon properly.

[warrean]

Unsupported? Where can I find this information?
I thought I saw Android 2 related code in the viewport/Android.js-class.

Anyway it's indeed Android's poor webkit-mask CSS implementation, I just wanted to post this here because of the possible fix. I've had a lot of threads helping me this way.

[mitchellsimoens]

http://www.sencha.com/products/touch/features/ towards the bottom for the devices we test with.

[warrean]

Sorry I meant 2.3, it's a HTC Evo 4g device.