virtual-scroller 1.12.4 → 1.12.6

package/commonjs/getVerticalSpacing.js

@@ -9,27 +9,67 @@ function getVerticalSpacing(_ref) {
   var itemsContainer = _ref.itemsContainer,
       renderedItemsCount = _ref.renderedItemsCount;
 
+  // If there's more than a single item rendered, it becomes potentially possible
+  // to measure vertical spacing.
   if (renderedItemsCount > 1) {
+    // Measure the first item of the first rendered row: top offset and height.
     var firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0);
-    var firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0);
+    var firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0); // Measure next items until a new row is started, at which point
+    // it becomes possible to calculate the vertical spacing between the rows.
+
     var i = 1;
 
     while (i < renderedItemsCount) {
+      // Measure item: top offset and height.
       var itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i);
-      var itemHeight = itemsContainer.getNthRenderedItemHeight(i); // See if the item is on the next row.
-      // Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work
-      // because items in a row aren't required to be aligned to the top border.
+      var itemHeight = itemsContainer.getNthRenderedItemHeight(i); // See if the item is already on the next row. If yes, then can calculate
+      // vertical spacing between the rows.
+      //
+      // To detect next row, it uses a `>=` operator rather than just a `!==` operator.
+      // The reason is that simply checking for `itemTopOffset !== firstShownRowTopOffset`
+      // wouldn't work because items in a row aren't required to be aligned to the top edge of the row.
+      //
+      // Also, it uses rounding here to work around a bug that manifests when a web browser
+      // renders the web page with a scale value other than 100%. In that case, even when
+      // different identical items would've had equal heights, they'd have slightly different heights
+      // to the point of ~0.00001 because of the non-100% scale calculation imprecision.
+      //
+      // The result would be incorrect detection of same/next row, which would result in
+      // returning a huge vertical spacing that is equal to a height of an item,
+      // which would then result in a glitchy behavior of `virtual-scroller` when scrolling.
+      //
+      // To work around that bug, it rounds up to the closest higher `1px`
+      // and only then performs the `>=` comparison to detect same/next row.
+      //
 
-      if (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {
-        // Measure inter-row spacing.
+      if (itemTopOffset + PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT >= firstShownRowTopOffset + firstShownRowHeight) {
+        // Next row is detected. Measure inter-row spacing.
         // Can't be "negative" with the current `if` condition.
         return itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight);
-      } // A row height is the maximum of its item heights.
+      } // Not at the next row yet. Re-measure the current row height.
+      // The rationale for re-measuring is that there can be items of variable height
+      // in a given row, so the row's height is not known until all items in it are measured.
+      // A row height is the maximum of its items' heights.
+
 
+      firstShownRowHeight = Math.max(firstShownRowHeight, itemHeight); // Proceed to the next item.
 
-      firstShownRowHeight = Math.max(firstShownRowHeight, itemHeight);
       i++;
     }
   }
-}
+} // There's a rounding precision error when a web browser has a non-100% scale
+// when viewing a page. I dunno what's the source of the imprecision.
+// The thing is: previousRow.top + previousRow.height !== nextRow.top.
+// The two parts of the equation above differ by a magnitude of 0.0001.
+// To fix that, when performing a `>=` comparison, an additional increment is added.
+//
+// This value of the increment is set to `0.9px` for no real reason.
+// It could be `1px` or `0.99px` and it would most likely work the same way.
+// The rationale for the `0.9px` value is that a minimum height of a DOM element
+// is assumed to be `1px` so having a value less than `1px` would theoretically be
+// less buggy in a way that it wouldn't skip the rows that're `1px` high.
+//
+
+
+var PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT = 0.9;
 //# sourceMappingURL=getVerticalSpacing.js.map

package/commonjs/getVerticalSpacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"getVerticalSpacing.js","names":["getVerticalSpacing","itemsContainer","renderedItemsCount","firstShownRowTopOffset","getNthRenderedItemTopOffset","firstShownRowHeight","getNthRenderedItemHeight","i","itemTopOffset","itemHeight","Math","max"],"sources":["../source/getVerticalSpacing.js"],"sourcesContent":["export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {\r\n\tif (renderedItemsCount > 1) {\r\n\t\tconst firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)\r\n\t\tlet firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)\r\n\t\tlet i = 1\r\n\t\twhile (i < renderedItemsCount) {\r\n\t\t\tconst itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)\r\n\t\t\tconst itemHeight = itemsContainer.getNthRenderedItemHeight(i)\r\n\t\t\t// See if the item is on the next row.\r\n\t\t\t// Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work\r\n\t\t\t// because items in a row aren't required to be aligned to the top border.\r\n\t\t\tif (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {\r\n\t\t\t\t// Measure inter-row spacing.\r\n\t\t\t\t// Can't be \"negative\" with the current `if` condition.\r\n\t\t\t\treturn itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)\r\n\t\t\t}\r\n\t\t\t// A row height is the maximum of its item heights.\r\n\t\t\tfirstShownRowHeight = Math.max(firstShownRowHeight, itemHeight)\r\n\t\t\ti++\r\n\t\t}\r\n\t}\r\n}"],"mappings":";;;;;;;AAAe,SAASA,kBAAT,OAAoE;EAAA,IAAtCC,cAAsC,QAAtCA,cAAsC;EAAA,IAAtBC,kBAAsB,QAAtBA,kBAAsB;;EAClF,IAAIA,kBAAkB,GAAG,CAAzB,EAA4B;IAC3B,IAAMC,sBAAsB,GAAGF,cAAc,CAACG,2BAAf,CAA2C,CAA3C,CAA/B;IACA,IAAIC,mBAAmB,GAAGJ,cAAc,CAACK,wBAAf,CAAwC,CAAxC,CAA1B;IACA,IAAIC,CAAC,GAAG,CAAR;;IACA,OAAOA,CAAC,GAAGL,kBAAX,EAA+B;MAC9B,IAAMM,aAAa,GAAGP,cAAc,CAACG,2BAAf,CAA2CG,CAA3C,CAAtB;MACA,IAAME,UAAU,GAAGR,cAAc,CAACK,wBAAf,CAAwCC,CAAxC,CAAnB,CAF8B,CAG9B;MACA;MACA;;MACA,IAAIC,aAAa,IAAIL,sBAAsB,GAAGE,mBAA9C,EAAmE;QAClE;QACA;QACA,OAAOG,aAAa,IAAIL,sBAAsB,GAAGE,mBAA7B,CAApB;MACA,CAV6B,CAW9B;;;MACAA,mBAAmB,GAAGK,IAAI,CAACC,GAAL,CAASN,mBAAT,EAA8BI,UAA9B,CAAtB;MACAF,CAAC;IACD;EACD;AACD"}
+{"version":3,"file":"getVerticalSpacing.js","names":["getVerticalSpacing","itemsContainer","renderedItemsCount","firstShownRowTopOffset","getNthRenderedItemTopOffset","firstShownRowHeight","getNthRenderedItemHeight","i","itemTopOffset","itemHeight","PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT","Math","max"],"sources":["../source/getVerticalSpacing.js"],"sourcesContent":["export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {\r\n\t// If there's more than a single item rendered, it becomes potentially possible\r\n\t// to measure vertical spacing.\r\n\tif (renderedItemsCount > 1) {\r\n\t\t// Measure the first item of the first rendered row: top offset and height.\r\n\t\tconst firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)\r\n\t\tlet firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)\r\n\r\n\t\t// Measure next items until a new row is started, at which point\r\n\t\t// it becomes possible to calculate the vertical spacing between the rows.\r\n\t\tlet i = 1\r\n\t\twhile (i < renderedItemsCount) {\r\n\t\t\t// Measure item: top offset and height.\r\n\t\t\tconst itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)\r\n\t\t\tconst itemHeight = itemsContainer.getNthRenderedItemHeight(i)\r\n\r\n\t\t\t// See if the item is already on the next row. If yes, then can calculate\r\n\t\t\t// vertical spacing between the rows.\r\n\t\t\t//\r\n\t\t\t// To detect next row, it uses a `>=` operator rather than just a `!==` operator.\r\n\t\t\t// The reason is that simply checking for `itemTopOffset !== firstShownRowTopOffset`\r\n\t\t\t// wouldn't work because items in a row aren't required to be aligned to the top edge of the row.\r\n\t\t\t//\r\n\t\t\t// Also, it uses rounding here to work around a bug that manifests when a web browser\r\n\t\t\t// renders the web page with a scale value other than 100%. In that case, even when\r\n\t\t\t// different identical items would've had equal heights, they'd have slightly different heights\r\n\t\t\t// to the point of ~0.00001 because of the non-100% scale calculation imprecision.\r\n\t\t\t//\r\n\t\t\t// The result would be incorrect detection of same/next row, which would result in\r\n\t\t\t// returning a huge vertical spacing that is equal to a height of an item,\r\n\t\t\t// which would then result in a glitchy behavior of `virtual-scroller` when scrolling.\r\n\t\t\t//\r\n\t\t\t// To work around that bug, it rounds up to the closest higher `1px`\r\n\t\t\t// and only then performs the `>=` comparison to detect same/next row.\r\n\t\t\t//\r\n\t\t\tif (itemTopOffset + PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT >= firstShownRowTopOffset + firstShownRowHeight) {\r\n\t\t\t\t// Next row is detected. Measure inter-row spacing.\r\n\t\t\t\t// Can't be \"negative\" with the current `if` condition.\r\n\t\t\t\treturn itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)\r\n\t\t\t}\r\n\r\n\t\t\t// Not at the next row yet. Re-measure the current row height.\r\n\t\t\t// The rationale for re-measuring is that there can be items of variable height\r\n\t\t\t// in a given row, so the row's height is not known until all items in it are measured.\r\n\t\t\t// A row height is the maximum of its items' heights.\r\n\t\t\tfirstShownRowHeight = Math.max(firstShownRowHeight, itemHeight)\r\n\r\n\t\t\t// Proceed to the next item.\r\n\t\t\ti++\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// There's a rounding precision error when a web browser has a non-100% scale\r\n// when viewing a page. I dunno what's the source of the imprecision.\r\n// The thing is: previousRow.top + previousRow.height !== nextRow.top.\r\n// The two parts of the equation above differ by a magnitude of 0.0001.\r\n// To fix that, when performing a `>=` comparison, an additional increment is added.\r\n//\r\n// This value of the increment is set to `0.9px` for no real reason.\r\n// It could be `1px` or `0.99px` and it would most likely work the same way.\r\n// The rationale for the `0.9px` value is that a minimum height of a DOM element\r\n// is assumed to be `1px` so having a value less than `1px` would theoretically be\r\n// less buggy in a way that it wouldn't skip the rows that're `1px` high.\r\n//\r\nconst PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT = 0.9"],"mappings":";;;;;;;AAAe,SAASA,kBAAT,OAAoE;EAAA,IAAtCC,cAAsC,QAAtCA,cAAsC;EAAA,IAAtBC,kBAAsB,QAAtBA,kBAAsB;;EAClF;EACA;EACA,IAAIA,kBAAkB,GAAG,CAAzB,EAA4B;IAC3B;IACA,IAAMC,sBAAsB,GAAGF,cAAc,CAACG,2BAAf,CAA2C,CAA3C,CAA/B;IACA,IAAIC,mBAAmB,GAAGJ,cAAc,CAACK,wBAAf,CAAwC,CAAxC,CAA1B,CAH2B,CAK3B;IACA;;IACA,IAAIC,CAAC,GAAG,CAAR;;IACA,OAAOA,CAAC,GAAGL,kBAAX,EAA+B;MAC9B;MACA,IAAMM,aAAa,GAAGP,cAAc,CAACG,2BAAf,CAA2CG,CAA3C,CAAtB;MACA,IAAME,UAAU,GAAGR,cAAc,CAACK,wBAAf,CAAwCC,CAAxC,CAAnB,CAH8B,CAK9B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;MACA,IAAIC,aAAa,GAAGE,0CAAhB,IAA8DP,sBAAsB,GAAGE,mBAA3F,EAAgH;QAC/G;QACA;QACA,OAAOG,aAAa,IAAIL,sBAAsB,GAAGE,mBAA7B,CAApB;MACA,CA5B6B,CA8B9B;MACA;MACA;MACA;;;MACAA,mBAAmB,GAAGM,IAAI,CAACC,GAAL,CAASP,mBAAT,EAA8BI,UAA9B,CAAtB,CAlC8B,CAoC9B;;MACAF,CAAC;IACD;EACD;AACD,C,CAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,IAAMG,0CAA0C,GAAG,GAAnD"}

package/modules/getVerticalSpacing.js

@@ -2,27 +2,66 @@ export default function getVerticalSpacing(_ref) {
   var itemsContainer = _ref.itemsContainer,
       renderedItemsCount = _ref.renderedItemsCount;
 
+  // If there's more than a single item rendered, it becomes potentially possible
+  // to measure vertical spacing.
   if (renderedItemsCount > 1) {
+    // Measure the first item of the first rendered row: top offset and height.
     var firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0);
-    var firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0);
+    var firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0); // Measure next items until a new row is started, at which point
+    // it becomes possible to calculate the vertical spacing between the rows.
+
     var i = 1;
 
     while (i < renderedItemsCount) {
+      // Measure item: top offset and height.
       var itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i);
-      var itemHeight = itemsContainer.getNthRenderedItemHeight(i); // See if the item is on the next row.
-      // Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work
-      // because items in a row aren't required to be aligned to the top border.
+      var itemHeight = itemsContainer.getNthRenderedItemHeight(i); // See if the item is already on the next row. If yes, then can calculate
+      // vertical spacing between the rows.
+      //
+      // To detect next row, it uses a `>=` operator rather than just a `!==` operator.
+      // The reason is that simply checking for `itemTopOffset !== firstShownRowTopOffset`
+      // wouldn't work because items in a row aren't required to be aligned to the top edge of the row.
+      //
+      // Also, it uses rounding here to work around a bug that manifests when a web browser
+      // renders the web page with a scale value other than 100%. In that case, even when
+      // different identical items would've had equal heights, they'd have slightly different heights
+      // to the point of ~0.00001 because of the non-100% scale calculation imprecision.
+      //
+      // The result would be incorrect detection of same/next row, which would result in
+      // returning a huge vertical spacing that is equal to a height of an item,
+      // which would then result in a glitchy behavior of `virtual-scroller` when scrolling.
+      //
+      // To work around that bug, it rounds up to the closest higher `1px`
+      // and only then performs the `>=` comparison to detect same/next row.
+      //
 
-      if (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {
-        // Measure inter-row spacing.
+      if (itemTopOffset + PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT >= firstShownRowTopOffset + firstShownRowHeight) {
+        // Next row is detected. Measure inter-row spacing.
         // Can't be "negative" with the current `if` condition.
         return itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight);
-      } // A row height is the maximum of its item heights.
+      } // Not at the next row yet. Re-measure the current row height.
+      // The rationale for re-measuring is that there can be items of variable height
+      // in a given row, so the row's height is not known until all items in it are measured.
+      // A row height is the maximum of its items' heights.
+
 
+      firstShownRowHeight = Math.max(firstShownRowHeight, itemHeight); // Proceed to the next item.
 
-      firstShownRowHeight = Math.max(firstShownRowHeight, itemHeight);
       i++;
     }
   }
-}
+} // There's a rounding precision error when a web browser has a non-100% scale
+// when viewing a page. I dunno what's the source of the imprecision.
+// The thing is: previousRow.top + previousRow.height !== nextRow.top.
+// The two parts of the equation above differ by a magnitude of 0.0001.
+// To fix that, when performing a `>=` comparison, an additional increment is added.
+//
+// This value of the increment is set to `0.9px` for no real reason.
+// It could be `1px` or `0.99px` and it would most likely work the same way.
+// The rationale for the `0.9px` value is that a minimum height of a DOM element
+// is assumed to be `1px` so having a value less than `1px` would theoretically be
+// less buggy in a way that it wouldn't skip the rows that're `1px` high.
+//
+
+var PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT = 0.9;
 //# sourceMappingURL=getVerticalSpacing.js.map

package/modules/getVerticalSpacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"getVerticalSpacing.js","names":["getVerticalSpacing","itemsContainer","renderedItemsCount","firstShownRowTopOffset","getNthRenderedItemTopOffset","firstShownRowHeight","getNthRenderedItemHeight","i","itemTopOffset","itemHeight","Math","max"],"sources":["../source/getVerticalSpacing.js"],"sourcesContent":["export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {\r\n\tif (renderedItemsCount > 1) {\r\n\t\tconst firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)\r\n\t\tlet firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)\r\n\t\tlet i = 1\r\n\t\twhile (i < renderedItemsCount) {\r\n\t\t\tconst itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)\r\n\t\t\tconst itemHeight = itemsContainer.getNthRenderedItemHeight(i)\r\n\t\t\t// See if the item is on the next row.\r\n\t\t\t// Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work\r\n\t\t\t// because items in a row aren't required to be aligned to the top border.\r\n\t\t\tif (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {\r\n\t\t\t\t// Measure inter-row spacing.\r\n\t\t\t\t// Can't be \"negative\" with the current `if` condition.\r\n\t\t\t\treturn itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)\r\n\t\t\t}\r\n\t\t\t// A row height is the maximum of its item heights.\r\n\t\t\tfirstShownRowHeight = Math.max(firstShownRowHeight, itemHeight)\r\n\t\t\ti++\r\n\t\t}\r\n\t}\r\n}"],"mappings":"AAAA,eAAe,SAASA,kBAAT,OAAoE;EAAA,IAAtCC,cAAsC,QAAtCA,cAAsC;EAAA,IAAtBC,kBAAsB,QAAtBA,kBAAsB;;EAClF,IAAIA,kBAAkB,GAAG,CAAzB,EAA4B;IAC3B,IAAMC,sBAAsB,GAAGF,cAAc,CAACG,2BAAf,CAA2C,CAA3C,CAA/B;IACA,IAAIC,mBAAmB,GAAGJ,cAAc,CAACK,wBAAf,CAAwC,CAAxC,CAA1B;IACA,IAAIC,CAAC,GAAG,CAAR;;IACA,OAAOA,CAAC,GAAGL,kBAAX,EAA+B;MAC9B,IAAMM,aAAa,GAAGP,cAAc,CAACG,2BAAf,CAA2CG,CAA3C,CAAtB;MACA,IAAME,UAAU,GAAGR,cAAc,CAACK,wBAAf,CAAwCC,CAAxC,CAAnB,CAF8B,CAG9B;MACA;MACA;;MACA,IAAIC,aAAa,IAAIL,sBAAsB,GAAGE,mBAA9C,EAAmE;QAClE;QACA;QACA,OAAOG,aAAa,IAAIL,sBAAsB,GAAGE,mBAA7B,CAApB;MACA,CAV6B,CAW9B;;;MACAA,mBAAmB,GAAGK,IAAI,CAACC,GAAL,CAASN,mBAAT,EAA8BI,UAA9B,CAAtB;MACAF,CAAC;IACD;EACD;AACD"}
+{"version":3,"file":"getVerticalSpacing.js","names":["getVerticalSpacing","itemsContainer","renderedItemsCount","firstShownRowTopOffset","getNthRenderedItemTopOffset","firstShownRowHeight","getNthRenderedItemHeight","i","itemTopOffset","itemHeight","PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT","Math","max"],"sources":["../source/getVerticalSpacing.js"],"sourcesContent":["export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {\r\n\t// If there's more than a single item rendered, it becomes potentially possible\r\n\t// to measure vertical spacing.\r\n\tif (renderedItemsCount > 1) {\r\n\t\t// Measure the first item of the first rendered row: top offset and height.\r\n\t\tconst firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)\r\n\t\tlet firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)\r\n\r\n\t\t// Measure next items until a new row is started, at which point\r\n\t\t// it becomes possible to calculate the vertical spacing between the rows.\r\n\t\tlet i = 1\r\n\t\twhile (i < renderedItemsCount) {\r\n\t\t\t// Measure item: top offset and height.\r\n\t\t\tconst itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)\r\n\t\t\tconst itemHeight = itemsContainer.getNthRenderedItemHeight(i)\r\n\r\n\t\t\t// See if the item is already on the next row. If yes, then can calculate\r\n\t\t\t// vertical spacing between the rows.\r\n\t\t\t//\r\n\t\t\t// To detect next row, it uses a `>=` operator rather than just a `!==` operator.\r\n\t\t\t// The reason is that simply checking for `itemTopOffset !== firstShownRowTopOffset`\r\n\t\t\t// wouldn't work because items in a row aren't required to be aligned to the top edge of the row.\r\n\t\t\t//\r\n\t\t\t// Also, it uses rounding here to work around a bug that manifests when a web browser\r\n\t\t\t// renders the web page with a scale value other than 100%. In that case, even when\r\n\t\t\t// different identical items would've had equal heights, they'd have slightly different heights\r\n\t\t\t// to the point of ~0.00001 because of the non-100% scale calculation imprecision.\r\n\t\t\t//\r\n\t\t\t// The result would be incorrect detection of same/next row, which would result in\r\n\t\t\t// returning a huge vertical spacing that is equal to a height of an item,\r\n\t\t\t// which would then result in a glitchy behavior of `virtual-scroller` when scrolling.\r\n\t\t\t//\r\n\t\t\t// To work around that bug, it rounds up to the closest higher `1px`\r\n\t\t\t// and only then performs the `>=` comparison to detect same/next row.\r\n\t\t\t//\r\n\t\t\tif (itemTopOffset + PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT >= firstShownRowTopOffset + firstShownRowHeight) {\r\n\t\t\t\t// Next row is detected. Measure inter-row spacing.\r\n\t\t\t\t// Can't be \"negative\" with the current `if` condition.\r\n\t\t\t\treturn itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)\r\n\t\t\t}\r\n\r\n\t\t\t// Not at the next row yet. Re-measure the current row height.\r\n\t\t\t// The rationale for re-measuring is that there can be items of variable height\r\n\t\t\t// in a given row, so the row's height is not known until all items in it are measured.\r\n\t\t\t// A row height is the maximum of its items' heights.\r\n\t\t\tfirstShownRowHeight = Math.max(firstShownRowHeight, itemHeight)\r\n\r\n\t\t\t// Proceed to the next item.\r\n\t\t\ti++\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// There's a rounding precision error when a web browser has a non-100% scale\r\n// when viewing a page. I dunno what's the source of the imprecision.\r\n// The thing is: previousRow.top + previousRow.height !== nextRow.top.\r\n// The two parts of the equation above differ by a magnitude of 0.0001.\r\n// To fix that, when performing a `>=` comparison, an additional increment is added.\r\n//\r\n// This value of the increment is set to `0.9px` for no real reason.\r\n// It could be `1px` or `0.99px` and it would most likely work the same way.\r\n// The rationale for the `0.9px` value is that a minimum height of a DOM element\r\n// is assumed to be `1px` so having a value less than `1px` would theoretically be\r\n// less buggy in a way that it wouldn't skip the rows that're `1px` high.\r\n//\r\nconst PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT = 0.9"],"mappings":"AAAA,eAAe,SAASA,kBAAT,OAAoE;EAAA,IAAtCC,cAAsC,QAAtCA,cAAsC;EAAA,IAAtBC,kBAAsB,QAAtBA,kBAAsB;;EAClF;EACA;EACA,IAAIA,kBAAkB,GAAG,CAAzB,EAA4B;IAC3B;IACA,IAAMC,sBAAsB,GAAGF,cAAc,CAACG,2BAAf,CAA2C,CAA3C,CAA/B;IACA,IAAIC,mBAAmB,GAAGJ,cAAc,CAACK,wBAAf,CAAwC,CAAxC,CAA1B,CAH2B,CAK3B;IACA;;IACA,IAAIC,CAAC,GAAG,CAAR;;IACA,OAAOA,CAAC,GAAGL,kBAAX,EAA+B;MAC9B;MACA,IAAMM,aAAa,GAAGP,cAAc,CAACG,2BAAf,CAA2CG,CAA3C,CAAtB;MACA,IAAME,UAAU,GAAGR,cAAc,CAACK,wBAAf,CAAwCC,CAAxC,CAAnB,CAH8B,CAK9B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;MACA,IAAIC,aAAa,GAAGE,0CAAhB,IAA8DP,sBAAsB,GAAGE,mBAA3F,EAAgH;QAC/G;QACA;QACA,OAAOG,aAAa,IAAIL,sBAAsB,GAAGE,mBAA7B,CAApB;MACA,CA5B6B,CA8B9B;MACA;MACA;MACA;;;MACAA,mBAAmB,GAAGM,IAAI,CAACC,GAAL,CAASP,mBAAT,EAA8BI,UAA9B,CAAtB,CAlC8B,CAoC9B;;MACAF,CAAC;IACD;EACD;AACD,C,CAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,IAAMG,0CAA0C,GAAG,GAAnD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-scroller",
-  "version": "1.12.4",
+  "version": "1.12.6",
   "description": "A component for efficiently rendering large lists of variable height items",
   "main": "index.cjs",
   "module": "index.js",

package/source/getVerticalSpacing.js

@@ -1,22 +1,66 @@
 export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {
+	// If there's more than a single item rendered, it becomes potentially possible
+	// to measure vertical spacing.
 	if (renderedItemsCount > 1) {
+		// Measure the first item of the first rendered row: top offset and height.
 		const firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)
 		let firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)
+
+		// Measure next items until a new row is started, at which point
+		// it becomes possible to calculate the vertical spacing between the rows.
 		let i = 1
 		while (i < renderedItemsCount) {
+			// Measure item: top offset and height.
 			const itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)
 			const itemHeight = itemsContainer.getNthRenderedItemHeight(i)
-			// See if the item is on the next row.
-			// Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work
-			// because items in a row aren't required to be aligned to the top border.
-			if (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {
-				// Measure inter-row spacing.
+
+			// See if the item is already on the next row. If yes, then can calculate
+			// vertical spacing between the rows.
+			//
+			// To detect next row, it uses a `>=` operator rather than just a `!==` operator.
+			// The reason is that simply checking for `itemTopOffset !== firstShownRowTopOffset`
+			// wouldn't work because items in a row aren't required to be aligned to the top edge of the row.
+			//
+			// Also, it uses rounding here to work around a bug that manifests when a web browser
+			// renders the web page with a scale value other than 100%. In that case, even when
+			// different identical items would've had equal heights, they'd have slightly different heights
+			// to the point of ~0.00001 because of the non-100% scale calculation imprecision.
+			//
+			// The result would be incorrect detection of same/next row, which would result in
+			// returning a huge vertical spacing that is equal to a height of an item,
+			// which would then result in a glitchy behavior of `virtual-scroller` when scrolling.
+			//
+			// To work around that bug, it rounds up to the closest higher `1px`
+			// and only then performs the `>=` comparison to detect same/next row.
+			//
+			if (itemTopOffset + PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT >= firstShownRowTopOffset + firstShownRowHeight) {
+				// Next row is detected. Measure inter-row spacing.
 				// Can't be "negative" with the current `if` condition.
 				return itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)
 			}
-			// A row height is the maximum of its item heights.
+
+			// Not at the next row yet. Re-measure the current row height.
+			// The rationale for re-measuring is that there can be items of variable height
+			// in a given row, so the row's height is not known until all items in it are measured.
+			// A row height is the maximum of its items' heights.
 			firstShownRowHeight = Math.max(firstShownRowHeight, itemHeight)
+
+			// Proceed to the next item.
 			i++
 		}
 	}
-}
+}
+
+// There's a rounding precision error when a web browser has a non-100% scale
+// when viewing a page. I dunno what's the source of the imprecision.
+// The thing is: previousRow.top + previousRow.height !== nextRow.top.
+// The two parts of the equation above differ by a magnitude of 0.0001.
+// To fix that, when performing a `>=` comparison, an additional increment is added.
+//
+// This value of the increment is set to `0.9px` for no real reason.
+// It could be `1px` or `0.99px` and it would most likely work the same way.
+// The rationale for the `0.9px` value is that a minimum height of a DOM element
+// is assumed to be `1px` so having a value less than `1px` would theoretically be
+// less buggy in a way that it wouldn't skip the rows that're `1px` high.
+//
+const PAGE_ZOOM_ROUNDING_PRECISION_FIX_INCREMENT = 0.9