title: ionic scroll: Prevent translate3d on parent element
body: <p>I have template in my ionic app that looks something like this: </p>
  
  <pre><code>&lt;ion-view&gt;
  &lt;ion-content&gt;
      &lt;div class="nav"&gt;
          &lt;span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"&gt;&lt;/span&gt;
          &lt;span&gt;{{ monthName }}&lt;/span&gt;
          &lt;span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle"&gt;
  ...
  </code></pre>
  
  <p>the div with the class 'nav' contains two buttons that let the user switch between two months. The months are in the <code>&lt;ion-scroll&gt;</code> element.</p>
  
  <p>This works as it should. The buttons scroll the <code>&lt;ion-scrol&gt;</code> element horizontally. But every time the buttons are used, the entire <code>&lt;ion-view&gt;</code> is scrolled vertically down by 20px - thus hiding the buttons.</p>
  
  <p>I've tried changing the <code>&lt;ion-scroll&gt;</code>s inline css (with <code>angular.element</code>) to not include 3d transforms, but they just get re-added.</p>
  
  <p>This is the function that gets called upon click - and my attempt to prevent the <code>transform3d</code> on the parent element</p>
  
  <pre><code>$scope.goToMonth = function(id, event){
      $location.hash(id);
      if(id == 'thisMonth'){
          $scope.monthName = monthLabels[thisMonth];
      }
      else{
          $scope.monthName = monthLabels[nextMonth];
      }
  
      var elm = angular.element(document.querySelector('.nav'));
      var parent = angular.element(elm.parent());
      console.log(parent[0].style.transform);
  
      parent[0].style.transform = 'none';
  
      $ionicScrollDelegate.anchorScroll(true);
  };
  </code></pre>
  
  <p>EDIT: I've also tried using <code>event.stopPropagation</code> - this breaks the functionality of the <code>&lt;ion-scroll&gt;</code> element</p>
  
  <p>Can anyone tell me how to prevent this behaviour?</p>