CSS translate3d element appearing behind itself.

I'm using CSS transform: translate3d( 0, 50px, 0) to implement pull to refresh. I'm using Ember.JS and implemented this http://ift.tt/1R2T0MM example pull to refresh as an Ember component.

The issue is that if I scroll down, then back up the content is translated down properly, but the card appears behind itself.

Can anyone help me prevent this from happening? I've tried using translate2d and margin-top but both are jumpy.

Here is a screenshot:

As you can see, the card with "manage friends ... " shows up twice. Once in its original location the next where it should be based on the 3d translate.

Heres the code that sets the style attributes.

// components/pull-to-refresh.js
export default Ember.Component.extend({
  didInsertElement: function() {
    this.set('options', {
      // the element holding pannable content area
      contentEl: Ember.$(this.element).find('.ptr-content')[0],

      // the element holding pull to refresh loading area
      ptrEl: Ember.$(this.element).find('.ptr-indicator')[0]
    });
    // ...
  },

  //...

  _setContentPan: function() {
    // Use transforms to smoothly animate elements on desktop and mobile devices
    var res1 = `translate3d( 0, ${this.get('pan.distance')}px, 0 )`;
    this.setProperties({
      'options.contentEl.style.webkitTransform': res1,
      'options.contentEl.style.transform': res1
    });

    this.setProperties({
      'options.ptrEl.style.webkitTransform': res1,
      'options.ptrEl.style.transform': res1
    });
  }
});

and the HTML

<div class="ptr-indicator-container">
  <div class="ptr-indicator">
    <center>
      <i class="icon-arrow-down"></i>

      <div class="loading-bubbles">
        <span id="l1"></span>
        <span id="l2"></span>
        <span id="l3"></span>
      </div>
    </center>
  </div>
</div>
<div class="ptr-content">
  
</div>