Feedback

Author: dariatiurina

src/Components/Web.JS/src/Virtualize.ts

@@ -94,8 +94,7 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
       // scrolling glitches.
       rangeBetweenSpacers.setStartAfter(spacerBefore);
       rangeBetweenSpacers.setEndBefore(spacerAfter);
-      const rangeRect = rangeBetweenSpacers.getBoundingClientRect();
-      const spacerSeparation = rangeRect.height;
+      const spacerSeparation = rangeBetweenSpacers.getBoundingClientRect().height;
       const containerSize = entry.rootBounds?.height;
 
       // Accumulate scale factors from all parent elements as they multiply together
@@ -107,7 +106,7 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
         const computedStyle = getComputedStyle(element);
 
         // Check for zoom property (applies uniform scaling)
-        if (computedStyle.zoom && computedStyle.zoom !== 'normal' && computedStyle.zoom !== '1') {
+        if (computedStyle.zoom && computedStyle.zoom !== '1') {
           scaleFactor *= parseFloat(computedStyle.zoom);
         }
 
@@ -121,12 +120,10 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
 
         // Check for transform property (matrix form)
         if (computedStyle.transform && computedStyle.transform !== 'none') {
-          // A 2D transform matrix has 6 values: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
-          const match = computedStyle.transform.match(/matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+)/);
-          if (match) {
-            const scaleY = parseFloat(match[1]);
-            scaleFactor *= scaleY;
-          }
+          // Parse the transform matrix using DOMMatrix to extract scaleY
+          const matrix = new DOMMatrix(computedStyle.transform);
+          // For vertical scrolling, we only need the Y-axis scale factor (d/m22)
+          scaleFactor *= matrix.d;
         }
         element = element.parentElement;
       }

src/Components/test/testassets/BasicTestApp/VirtualizationScale.razor

@@ -1,16 +1,24 @@
-<div id="virtualize" style="height: 200px; overflow: auto">
-    <Virtualize ItemsProvider="@itemsProvider">
-        <tr class="person"><span>@context.Name</span></tr>
-    </Virtualize>
+<div style="scale: @ScaleX @ScaleY; transform-origin: top left;">
+    <div id="virtualize" style="height: 200px; overflow: auto">
+        <Virtualize ItemsProvider="@itemsProvider">
+            <tr class="person"><span>@context.Name</span></tr>
+        </Virtualize>
+    </div>
 </div>
 
+<input type="number" @bind="ScaleX" />
+<input type="number" @bind="ScaleY" />
+
 @code {
     internal class Person
     {
         public int Id { get; set; }
         public string Name { get; set; } = string.Empty;
     }
 
+    public double ScaleX { get; set; } = 1.0;
+    public double ScaleY { get; set; } = 1.0;
+
     private ItemsProviderDelegate<Person> itemsProvider = default!;
 
     protected override void OnInitialized()
@@ -24,10 +32,3 @@
         };
     }
 }
-
-<style>
-    body {
-        scale: 2 0.5;
-        transform-origin: top left;
-    }
-</style>