ScrollView: prevent unnecessary scrollbar at non-100% browser zoom (T1310288) (#33291)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/scroll_view/scrollable.simulated.ts

@@ -38,6 +38,7 @@ import Scrollbar from '@ts/ui/scroll_view/scrollbar';
 import type {
   AllowedDirections, DxMouseEvent, DxMouseWheelEvent, ScrollEventArgs, ScrollOffset,
 } from '@ts/ui/scroll_view/types';
+import { getAdjustedBaseContainerSize } from '@ts/ui/scroll_view/utils/get_adjusted_base_container_size';
 
 interface ScrollVelocity {
   x: number;
@@ -562,16 +563,22 @@ export class Scroller {
 
   _updateScrollbar(): void {
     deferUpdater(() => {
-      const containerSize = this._containerSize();
+      const dimension = this._dimension;
+      const rawContainerSize = getBoundingRect(this._$container[0])[dimension];
+      const containerSize = Math.round(rawContainerSize);
       const contentSize = this._contentSize();
 
       // NOTE: Real container and content sizes can be a fractional number when scaling.
       //       Let's save sizes when scale = 100% to decide whether it is necessary to show
       //       the scrollbar based on by more precise numbers. We can do it because the container
       //       size to content size ratio should remain approximately the same at any zoom.
-      const dimension = this._dimension;
-      const baseContainerSize = this._getBaseDimension(this._$container[0], dimension);
+      const rawBaseContainerSize = this._getBaseDimension(this._$container[0], dimension);
       const baseContentSize = this._getBaseDimension(this._$content[0], dimension);
+      const baseContainerSize = getAdjustedBaseContainerSize(
+        rawContainerSize,
+        rawBaseContainerSize,
+        baseContentSize,
+      );
 
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       deferRender(() => {
@@ -690,10 +697,8 @@ export class SimulatedStrategy<
 
   _$content!: dxElementWrapper;
 
-  // eslint-disable-next-line no-restricted-globals
   _updateHandlerTimeout?: ReturnType<typeof setTimeout>;
 
-  // eslint-disable-next-line no-restricted-globals
   _validateWheelTimer?: ReturnType<typeof setTimeout>;
 
   _eventForUserAction?: unknown;

packages/devextreme/js/__internal/ui/scroll_view/utils/get_adjusted_base_container_size.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { getAdjustedBaseContainerSize } from './get_adjusted_base_container_size';
+
+describe('getAdjustedBaseContainerSize', () => {
+  it('should not adjust when zoom is 100% even if sizes differ by 1px', () => {
+    const result = getAdjustedBaseContainerSize(100, 100, 101);
+
+    expect(result).toBe(100);
+  });
+
+  it('should adjust when zoomed and sizes differ by 1px', () => {
+    const result = getAdjustedBaseContainerSize(99.82, 100, 101);
+
+    expect(result).toBe(101);
+  });
+
+  it('should not adjust when zoomed but sizes differ by more than 1px', () => {
+    const result = getAdjustedBaseContainerSize(99.82, 100, 102);
+
+    expect(result).toBe(100);
+  });
+
+  it('should not adjust when zoomed and container is larger than content', () => {
+    const result = getAdjustedBaseContainerSize(99.82, 101, 100);
+
+    expect(result).toBe(101);
+  });
+
+  it('should not adjust when zoomed and sizes are equal', () => {
+    const result = getAdjustedBaseContainerSize(99.82, 100, 100);
+
+    expect(result).toBe(100);
+  });
+});

packages/devextreme/js/__internal/ui/scroll_view/utils/get_adjusted_base_container_size.ts

@@ -0,0 +1,18 @@
+const ZOOM_DETECTION_THRESHOLD = 0.01;
+const MAX_ROUNDING_ARTIFACT_SIZE = 1;
+
+export function getAdjustedBaseContainerSize(
+  rawContainerSize: number,
+  baseContainerSize: number,
+  baseContentSize: number,
+): number {
+  const isZoomed = Math.abs(rawContainerSize - baseContainerSize) > ZOOM_DETECTION_THRESHOLD;
+
+  if (isZoomed
+    && baseContentSize > baseContainerSize
+    && baseContentSize - baseContainerSize <= MAX_ROUNDING_ARTIFACT_SIZE) {
+    return baseContentSize;
+  }
+
+  return baseContainerSize;
+}