diff --git a/src/components/img/img.scss b/src/components/img/img.scss index 72d2b9e004d..ecb1328e2b3 100644 --- a/src/components/img/img.scss +++ b/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 { diff --git a/src/components/virtual-scroll/test/list/app-module.ts b/src/components/virtual-scroll/test/list/app-module.ts index 337d195f759..20669f4df81 100644 --- a/src/components/virtual-scroll/test/list/app-module.ts +++ b/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 }); } } diff --git a/src/components/virtual-scroll/test/list/main.html b/src/components/virtual-scroll/test/list/main.html index 25c7bfaebea..51c7402402c 100644 --- a/src/components/virtual-scroll/test/list/main.html +++ b/src/components/virtual-scroll/test/list/main.html @@ -17,12 +17,16 @@ - + - - {{item.title}} - + + + + - +

{{item.title}}

+ + +
diff --git a/src/components/virtual-scroll/virtual-scroll.scss b/src/components/virtual-scroll/virtual-scroll.scss index 5b7810e6474..1fe49f53e45 100644 --- a/src/components/virtual-scroll/virtual-scroll.scss +++ b/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 { diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index cc27dc633ca..ed25fd0abc1 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -106,10 +106,13 @@ import { VirtualFooter, VirtualHeader, VirtualItem } from './virtual-item'; * Ionic provides `` 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, `` 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, `` 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 `` element over the native `` element * because when an `` 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