+
+
+
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