Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default iconMask in Android 2.0.3, small white border keeps visible

    iconMask in Android 2.0.3, small white border keeps visible


    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:
    Code:
                  {
                    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:
    Code:
    @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');

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    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


    Android 2.0.3 isn't a supported platform and this sounds like a browser issue not drawing the icon properly.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    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


    http://www.sencha.com/products/touch/features/ towards the bottom for the devices we test with.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread