Skip to content

Commit 75bccde

Browse files
crisbetoandrewseguin
authored andcommitted
fix(block-scroll-strategy): disable smooth scrolling before restoring scroll position (#8132)
Disables user-defined `scroll-behavior: smooth` before restoring the scroll position when disabling the `BlockScrollStrategy`, which prevents browsers from animating the scroll position change. Fixes #7139.
1 parent 9e4c636 commit 75bccde

File tree

2 files changed

+38
-3
lines changed

2 files changed

+38
-3
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,27 @@ describe('BlockScrollStrategy', () => {
136136
expect(document.documentElement.getBoundingClientRect().width).toBe(previousContentWidth);
137137
});
138138

139+
it('should not clobber user-defined scroll-behavior', skipIOS(() => {
140+
const root = document.documentElement;
141+
const body = document.body;
142+
143+
root.style['scrollBehavior'] = body.style['scrollBehavior'] = 'smooth';
144+
145+
// Get the value via the style declaration in order to
146+
// handle browsers that don't support the property yet.
147+
const initialRootValue = root.style['scrollBehavior'];
148+
const initialBodyValue = root.style['scrollBehavior'];
149+
150+
overlayRef.attach(componentPortal);
151+
overlayRef.detach();
152+
153+
expect(root.style['scrollBehavior']).toBe(initialRootValue);
154+
expect(body.style['scrollBehavior']).toBe(initialBodyValue);
155+
156+
// Avoid bleeding styles into other tests.
157+
root.style['scrollBehavior'] = body.style['scrollBehavior'] = '';
158+
}));
159+
139160
/**
140161
* Skips the specified test, if it is being executed on iOS. This is necessary, because
141162
* programmatic scrolling inside the Karma iframe doesn't work on iOS, which renders these

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,25 @@ export class BlockScrollStrategy implements ScrollStrategy {
4545
/** Unblocks page-level scroll while the attached overlay is open. */
4646
disable() {
4747
if (this._isEnabled) {
48+
const html = document.documentElement;
49+
const body = document.body;
50+
const previousHtmlScrollBehavior = html.style['scrollBehavior'] || '';
51+
const previousBodyScrollBehavior = body.style['scrollBehavior'] || '';
52+
4853
this._isEnabled = false;
49-
document.documentElement.style.left = this._previousHTMLStyles.left;
50-
document.documentElement.style.top = this._previousHTMLStyles.top;
51-
document.documentElement.classList.remove('cdk-global-scrollblock');
54+
55+
html.style.left = this._previousHTMLStyles.left;
56+
html.style.top = this._previousHTMLStyles.top;
57+
html.classList.remove('cdk-global-scrollblock');
58+
59+
// Disable user-defined smooth scrolling temporarily while we restore the scroll position.
60+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
61+
html.style['scrollBehavior'] = body.style['scrollBehavior'] = 'auto';
62+
5263
window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
64+
65+
html.style['scrollBehavior'] = previousHtmlScrollBehavior;
66+
body.style['scrollBehavior'] = previousBodyScrollBehavior;
5367
}
5468
}
5569

0 commit comments

Comments
 (0)