Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/lib/core/overlay/_overlay.scss
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,10 @@
.cdk-global-scrollblock {
position: fixed;

// Necessary for iOS not to expand past the viewport.
max-width: 100vw;
// Necessary for the content not to lose its width. Note that we're using 100%, instead of
// 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
// that the element had before we made it `fixed`.
width: 100%;

// Note: this will always add a scrollbar to whatever element it is on, which can
// potentially result in double scrollbars. It shouldn't be an issue, because we won't
Expand Down
11 changes: 11 additions & 0 deletions src/lib/core/overlay/scroll/block-scroll-strategy.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ describe('BlockScrollStrategy', () => {
}));

afterEach(() => {
strategy.disable();
document.body.removeChild(forceScrollElement);
setScrollPosition(0, 0);
});
Expand Down Expand Up @@ -110,6 +111,16 @@ describe('BlockScrollStrategy', () => {
}));


it('should keep the content width', () => {
forceScrollElement.style.width = '100px';

const previousContentWidth = document.documentElement.getBoundingClientRect().width;

strategy.enable();

expect(document.documentElement.getBoundingClientRect().width).toBe(previousContentWidth);
});

/**
* Skips the specified test, if it is being executed on iOS. This is necessary, because
* programmatic scrolling inside the Karma iframe doesn't work on iOS, which renders these
Expand Down