You found a bug! We've classified it as TOUCH-4603 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    ygritsenko is on a distinguished road

      0  

    Default Can't display the triangle for showBy in IE

    Can't display the triangle for showBy in IE


    I am attempting to display the triangle that appears when accessing a page using IE10 where showBy() is used.
    working overlay.PNG

    Unfortunately, IE doesn't even bother because the only CSS rules related to this are webkit-specific. It is my understanding this arrow is drawn using a mask, which, of course, no version of IE supports.

    I am observing this behavior in Sencha Touch 2.2.1. However, it is my understanding the framework should support IE10.

    Are there any plans to fix this soon and/or recommended workarounds?

    Thanks in advance.

    Code:
    Ext.Viewport.add({
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            {
                text    : 'Button',
                handler : function(button) {
                    var panel = new Ext.Panel({
                        top    : -10000,
                        left   : -10000,
                        width  : 300,
                        height : 300
                    });
    
                    Ext.Viewport.add(panel);
    
                    panel.showBy(button);
                }
            }
        ]
    });

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


    I'm going to open a bug for this so I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    ygritsenko is on a distinguished road

      0  

    Default


    Thank you for your attention in this matter.

    In case anyone else needs a quick fix to this, I've found a temporary workaround that I'll share. Add the following css:
    Code:
    .x-ie .x-anchor.x-anchor-top {  
      margin-top: -0.68em;
      margin-left: -0.8155em;
      width: 1.631em;
      height: 0.7em;
      border-left: 1em solid transparent;
      border-right: 1em solid transparent;
      border-bottom: 1em solid black;
    }
    
    
    .x-ie .x-anchor {
      position: absolute;
      overflow: hidden;
    }
    The above is a combination of .x-webkit .x-anchor.x-anchor-top and the rules used in touch-2.2.1/resources/themes/vendor/compass-recipes/tests/recipes/shape/polygon/triangle/ which doesn't use mask to generate triangles.

Thread Participants: 1

Tags for this Thread