diff --git a/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts b/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts index d6063546d31f..07ac3370fbb5 100644 --- a/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts +++ b/src/cdk/overlay/scroll/block-scroll-strategy.spec.ts @@ -157,6 +157,57 @@ describe('BlockScrollStrategy', () => { }), ); + it( + `should't do anything if the page isn't scrollable while zoomed out`, + skipIOS(() => { + if (platform.FIREFOX) { + // style.zoom is only supported from Firefox 126 + return; + } + + 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(() => { + if (platform.FIREFOX) { + // style.zoom is only supported from Firefox 126 + return; + } + + 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'; diff --git a/src/cdk/overlay/scroll/block-scroll-strategy.ts b/src/cdk/overlay/scroll/block-scroll-strategy.ts index 5ebff3d04a5d..0310efbe4b0b 100644 --- a/src/cdk/overlay/scroll/block-scroll-strategy.ts +++ b/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; } }