fix(virtualScroll): first node should use clientTop/clientLeft

src/components/virtual-scroll/test/image-gallery/main.html

@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header style="opacity: 0.9">
   <ion-navbar>
     <ion-title>Virtual Scroll: Image Gallery</ion-title>
     <ion-buttons end>
@@ -10,7 +10,11 @@
 </ion-header>
 
 
-<ion-content>
+<ion-content fullscreen>
+
+  <h4 padding>
+    Name these cars:
+  </h4>
 
   <ion-list [virtualScroll]="items"
             [headerFn]="headerFn"
@@ -37,6 +41,10 @@
 
   </ion-list>
 
+  <h4 padding>
+    How many did you get right?
+  </h4>
+
 </ion-content>
 
 <style>

src/components/virtual-scroll/test/virtual-scroll.spec.ts

@@ -543,6 +543,8 @@ describe('VirtualScroll', () => {
         offsetHeight: height,
         offsetTop: top,
         offsetLeft: left,
+        clientTop: top,
+        clientLeft: left,
         style: {
           top: '',
           left: ''

src/components/virtual-scroll/virtual-util.ts

@@ -284,7 +284,9 @@ export function initReadNodes(nodes: VirtualNode[], cells: VirtualCell[], data:
   if (nodes.length && cells.length) {
     // first node
     // ******** DOM READ ****************
-    cells[0].top = getElement(nodes[0]).offsetTop;
+    let firstEle = getElement(nodes[0]);
+    cells[0].top = firstEle.clientTop;
+    cells[0].left = firstEle.clientLeft;
     cells[0].row = 0;
 
     // ******** DOM READ ****************
@@ -606,13 +608,14 @@ function calcHeight(viewportHeight: number, approxHeight: string): number {
 /**
  * NO DOM
  */
-function getElement(node: VirtualNode) {
+function getElement(node: VirtualNode): HTMLElement {
   let rootNodes = node.view.rootNodes;
   for (var i = 0; i < rootNodes.length; i++) {
     if (rootNodes[i].nodeType === 1) {
       return rootNodes[i];
     }
   }
+  return null;
 }