fix(cdk/overlay): scroll was blocked when zoomed out even if scrolling wasn't an option

Fixes that an unnecessary disabled scroll bar was added when zoomed out during opening dialogs.

Fixes #25054.

Author: szoboszlaypali

src/cdk/overlay/scroll/block-scroll-strategy.spec.ts

@@ -157,6 +157,47 @@ describe('BlockScrollStrategy', () => {
     }),
   );
 
+  it(
+    `should't do anything if the page isn't scrollable while zoomed out`,
+    skipIOS(() => {
+      forceScrollElement.style.display = 'none';
+      document.body.style.zoom = '75%';
+      overlayRef.attach(componentPortal);
+      expect(document.body.scrollWidth).toBeGreaterThan(window.innerWidth);
+      expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
+      overlayRef.detach();
+      document.body.style.zoom = '100%';
+
+      document.documentElement.style.zoom = '75%';
+      overlayRef.attach(componentPortal);
+      expect(document.body.scrollWidth).toBeGreaterThan(window.innerWidth);
+      expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
+      document.documentElement.style.zoom = '100%';
+    }),
+  );
+
+  it(
+    `should add cdk-global-scrollblock while zoomed in`,
+    skipIOS(() => {
+      forceScrollElement.style.width = window.innerWidth - 20 + 'px';
+      forceScrollElement.style.height = window.innerHeight - 20 + 'px';
+      overlayRef.attach(componentPortal);
+      expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
+      overlayRef.detach();
+
+      document.body.style.zoom = '200%';
+      overlayRef.attach(componentPortal);
+      expect(documentElement.classList).toContain('cdk-global-scrollblock');
+      document.body.style.zoom = '100%';
+      overlayRef.detach();
+
+      document.documentElement.style.zoom = '200%';
+      overlayRef.attach(componentPortal);
+      expect(documentElement.classList).toContain('cdk-global-scrollblock');
+      document.documentElement.style.zoom = '100%';
+    }),
+  );
+
   it('should keep the content width', () => {
     forceScrollElement.style.width = '100px';
 

src/cdk/overlay/scroll/block-scroll-strategy.ts

@@ -96,8 +96,8 @@ export class BlockScrollStrategy implements ScrollStrategy {
       return false;
     }
 
-    const body = this._document.body;
+    const rootElement = this._document.documentElement;
     const viewport = this._viewportRuler.getViewportSize();
-    return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;
+    return rootElement.scrollHeight > viewport.height || rootElement.scrollWidth > viewport.width;
   }
 }