fix(collectionRepeat): fix a dom problem with margins and position:relative

Closes #3277.

Author: ajoslin

Diff for: js/angular/directive/collectionRepeat.js

@@ -483,6 +483,18 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
         repeaterBeforeSize += current[isVertical ? 'offsetTop' : 'offsetLeft'];
       } while( ionic.DomUtil.contains(scrollView.__content, current = current.offsetParent) );
 
+      var containerPrevNode = containerNode.previousElementSibling;
+      var beforeStyle = containerPrevNode ?  $window.getComputedStyle(containerPrevNode) : {};
+      var beforeMargin = parseInt(beforeStyle[isVertical ? 'marginBottom' : 'marginRight'] || 0);
+
+      // Because we position the collection container with position: relative, it doesn't take
+      // into account where to position itself relative to the previous element's marginBottom.
+      // To compensate, we translate the container up by the previous element's margin.
+      containerNode.style[ionic.CSS.TRANSFORM] = TRANSLATE_TEMPLATE_STR
+        .replace(PRIMARY, -beforeMargin)
+        .replace(SECONDARY, 0);
+      repeaterBeforeSize -= beforeMargin;
+
       if (!scrollView.__clientHeight || !scrollView.__clientWidth) {
         scrollView.__clientWidth = scrollView.__container.clientWidth;
         scrollView.__clientHeight = scrollView.__container.clientHeight;

Diff for: test/html/collection-repeat/basic-list.html

@@ -17,7 +17,7 @@
       <h1 class="title">Basic List: Static Dimensions</h1>
     </ion-header-bar>
     <ion-content>
-      <h4>WHATS UP</h4>
+      <h4 style="margin: 80px;">I have 80px margin</h4>
       <ion-list can-swipe="true" show-delete="$root.showDelete">
         <ion-item class="item" collection-repeat="item in items">
           <ion-option-button>Button</ion-option-button>