Demonstrate Enyo Panels animation artifacts

gistfile1.js

enyo.kind({
  name: "App",
  kind: "FittableColumns",
  classes: "app onyx",
  components: [
  
    {components:[
      {content:'Show Content', ontap:'contentPanelShow'},
      {content:'Show Contact', ontap:'contactPanelShow'},
    ]},
      
    
    /** 3 Panels
     * 1) Content
     * 2) Empty (when no content is visible)
     * 3) Contact Form 
     */
    {name:'contentPanels', kind: 'Panels', arrangerKind:"LeftRightArranger", onTransitionFinish: 'animatorEndCallbackPop', margin:0, fit:true, components:[
      {name: 'contentPanel', components:[
        {kind: "onyx.IconButton", src:"assets/cancel.png", ontap:"contentPanelHide"},
        {name: 'mainContent', content: "Lorem Ipsum"}
      ]},
      {name: 'emptyContentPanel', classes:'list', components:[
        {content:''},
      ]},
      {name: "contactPanel", components:[
        {tag: 'form', components: [
          {kind: "onyx.IconButton", src:"assets/cancel.png", ontap:"contentPanelHide"},
          {kind: "onyx.InputDecorator", components: [
            {kind: "onyx.Input", placeholder: "Name"},
          ]},
          {tag:'br'},
          {kind: "onyx.InputDecorator", components: [
            {kind: "onyx.Input", placeholder: "Email Address"},
          ]},
          {tag:'br'},
          {kind: "onyx.InputDecorator", components: [
            {kind: "onyx.TextArea", placeholder: "Message"}
          ]},
          {tag:'br'},
          {kind: 'onyx.Button', content:'Send', ontap: 'contactFormSend'}
        ]},
      ]},
    ]},
  ],
  
  
  /**
   * Animator end callback pop - how this works:
   * Handle an event (eg, 'ontap') which performs an animation (eg, Drawer.setOpen). If you need to wait for 
   * the animation for finish before performing the next animation (eg, close other drawer before opening clicked drawer),
   * you can set this.animatorEndCallback to the "on animation complete" function, and set your component's onEnd handler
   * to animatorEndCallbackPop (eg, {kind:'onyx.Drawer', onEnd:'animatorEndCallbackPop', ontap:'openMyDrawer'})
   */
  animatorEndCallback: undefined,
  animatorEndCallbackPop: function() {
    var func = this.animatorEndCallback;
    if (func) {
      this.animatorEndCallback = undefined;
      // FIXME I don't know why, but without a timeout (even 1ms) this seems to be flaky
      window.setTimeout(func,1);
    }
  },
  
  
  /**
   * Constructor
   */
  create: function() {
    this.inherited(arguments); // required
    this.$.contentPanels.setIndexDirect(1);
  },

  /**
   * Activate the content panel in contentPanels (contactPanel is the 3rd panel)
   */  
  contactPanelShow: function() {
    this.$.contentPanels.setIndex(2);
    if (enyo.Panels.isScreenNarrow() && this.$.mainPanels.index === 0) {
      this.$.mainPanels.next();
    }
  },

  /**
   * Activated the content panel based on the nav list item which was clicked.
   */
  contentPanelShow: function(inSender, inEvent) {
    var that=this;    
    showTheContent = function() {
      // Dynamically set the content pane & activate it.
      that.$.contentPanels.setIndex(0);
      if (enyo.Panels.isScreenNarrow()) {
        that.$.mainPanels.next();
      }
    }
    
    if (this.$.contentPanels.index == 0) {
      this.animatorEndCallback = showTheContent;
      this.$.contentPanels.setIndex(1);
    } else {
      showTheContent();
    }
  },

  /**
   * Go back to contentPanel's blank page ("hompage")
   */
  contentPanelHide: function() {
    this.$.contentPanels.setIndex(1);
    if (enyo.Panels.isScreenNarrow()) {
      this.$.mainPanels.previous();
    }
  },
  
});