Skip to content

Commit 394ae27

Browse files
szoboszlaypalimmalerba
authored andcommitted
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
1 parent 7faac70 commit 394ae27

File tree

2 files changed

+53
-2
lines changed

2 files changed

+53
-2
lines changed

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

+51
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,57 @@ describe('BlockScrollStrategy', () => {
149149
}),
150150
);
151151

152+
it(
153+
`should't do anything if the page isn't scrollable while zoomed out`,
154+
skipIOS(() => {
155+
if (platform.FIREFOX) {
156+
// style.zoom is only supported from Firefox 126
157+
return;
158+
}
159+
160+
forceScrollElement.style.display = 'none';
161+
document.body.style.zoom = '75%';
162+
overlayRef.attach(componentPortal);
163+
expect(document.body.scrollWidth).toBeGreaterThan(window.innerWidth);
164+
expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
165+
overlayRef.detach();
166+
document.body.style.zoom = '100%';
167+
168+
document.documentElement.style.zoom = '75%';
169+
overlayRef.attach(componentPortal);
170+
expect(document.body.scrollWidth).toBeGreaterThan(window.innerWidth);
171+
expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
172+
document.documentElement.style.zoom = '100%';
173+
}),
174+
);
175+
176+
it(
177+
`should add cdk-global-scrollblock while zoomed in`,
178+
skipIOS(() => {
179+
if (platform.FIREFOX) {
180+
// style.zoom is only supported from Firefox 126
181+
return;
182+
}
183+
184+
forceScrollElement.style.width = window.innerWidth - 20 + 'px';
185+
forceScrollElement.style.height = window.innerHeight - 20 + 'px';
186+
overlayRef.attach(componentPortal);
187+
expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
188+
overlayRef.detach();
189+
190+
document.body.style.zoom = '200%';
191+
overlayRef.attach(componentPortal);
192+
expect(documentElement.classList).toContain('cdk-global-scrollblock');
193+
document.body.style.zoom = '100%';
194+
overlayRef.detach();
195+
196+
document.documentElement.style.zoom = '200%';
197+
overlayRef.attach(componentPortal);
198+
expect(documentElement.classList).toContain('cdk-global-scrollblock');
199+
document.documentElement.style.zoom = '100%';
200+
}),
201+
);
202+
152203
it('should keep the content width', () => {
153204
forceScrollElement.style.width = '100px';
154205

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@ export class BlockScrollStrategy implements ScrollStrategy {
106106
return false;
107107
}
108108

109-
const body = this._document.body;
109+
const rootElement = this._document.documentElement;
110110
const viewport = this._viewportRuler.getViewportSize();
111-
return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;
111+
return rootElement.scrollHeight > viewport.height || rootElement.scrollWidth > viewport.width;
112112
}
113113
}

0 commit comments

Comments
 (0)