fix(virtual-scroll): fix image rendering bug

Closes #6983

Author: adamdbradley

src/components/img/img.scss

@@ -14,9 +14,6 @@ ion-img {
 
 ion-img img {
   flex-shrink: 0;
-
-  min-width: 100%;
-  min-height: 100%;
 }
 
 ion-img .img-placeholder {

src/components/virtual-scroll/test/list/app-module.ts

@@ -6,17 +6,18 @@ import { IonicApp, IonicModule } from '../../../..';
   templateUrl: 'main.html'
 })
 export class E2EPage {
-  items: Array<{title: string}>;
+  items: Array<{title: string; id: number}>;
 
   constructor() {
-    this.emptyList();
+    this.fillList();
   }
 
   fillList() {
     this.items = [];
     for (let i = 0; i < 500; i++) {
       this.items.push({
-        title: 'Item ' + i
+        title: 'Item ' + i,
+        id: i
       });
     }
   }

src/components/virtual-scroll/test/list/main.html

@@ -17,12 +17,16 @@
     <button ion-button (click)="emptyList()">Empty List</button>
   </div>
 
- <ion-list [virtualScroll]="items">
+  <ion-list [virtualScroll]="items">
 
-  <ion-item text-wrap *virtualItem="let item" (click)="itemTapped($event, item)">
-    {{item.title}}
-  </ion-item>
+    <ion-item class="item-text-wrap" *virtualItem="let item" (click)="itemTapped(item)">
+      <ion-thumbnail item-left>
+        <ion-img src="http://loremflickr.com/80/80/dog?{{item.id}}"></ion-img>
+      </ion-thumbnail>
 
-</ion-list>
+      <h2 class="text-wrap">{{item.title}}</h2>
+    </ion-item>
+
+  </ion-list>
 
 </ion-content>

src/components/virtual-scroll/virtual-scroll.scss

@@ -4,6 +4,8 @@
 
 .virtual-scroll {
   position: relative;
+
+  contain: content;
 }
 
 .virtual-scroll .virtual-position,
@@ -15,7 +17,7 @@
 
   transition-duration: 0ms;
 
-  contain: strict;
+  contain: content;
 }
 
 .virtual-scroll .virtual-hidden {

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

@@ -106,10 +106,13 @@ import { VirtualFooter, VirtualHeader, VirtualItem } from './virtual-item';
  * Ionic provides `<ion-img>` to manage HTTP requests and image rendering.
  * Additionally, it includes a customizable placeholder element which shows
  * before the image has finished loading. While scrolling through items
- * quickly, `<ion-img>` knows not to make any image requests, and only loads
- * the images that are viewable after scrolling. It's also important for app
- * developers to ensure image sizes are locked in, and after images have fully
- * loaded they do not change size and affect any other element sizes.
+ * quickly, `<ion-img>` knows not to make any image http requests, and only
+ * loads the images that are viewable after scrolling.
+ *
+ * It's also important for app developers to ensure image sizes are locked in,
+ * and after images have fully loaded they do not change size and affect any
+ * other element sizes. Simply put, to ensure rendering bugs are not introduced,
+ * it's vital that elements within a virtual item does not dynamically change.
  *
  * We recommend using our `<ion-img>` element over the native `<img>` element
  * because when an `<img>` element is added to the DOM, it immediately
@@ -164,6 +167,9 @@ import { VirtualFooter, VirtualHeader, VirtualItem } from './virtual-item';
  *   while scrolling.
  * - Image sizes should be locked in, meaning the size of any element
  *   should not change after the image has loaded.
+ * - For the most part, ensure the element size for each virtual item
+ *   does not dynamically change, but rather, their size must already be
+ *   locked in via CSS at the time they are rendered.
  * - Provide an approximate width and height so the virtual scroll can
  *   best calculate the cell height.
  * - Changing the dataset requires the entire virtual scroll to be