fix(cdk/overlay): scrolling broken in some overlay sizes #23115
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When the positioning of an overlay is calculated, the overlay pane is
moved to the top right corner, and given an unbounded size. Based on the
calculated size, a position is attempted where the entire element can
fit next to the origin element without needing to scroll.
If an overlay pane is created with a size large enough that it needs
scrolling in any valid position (top/bottom/left/right) but small enough
that it can fit in the viewport without needing to scroll, the scrolling
of that pane will break. When the pane is moved to the top left corner
for size calculation, the pane will lose it's scroll position since it
no longer has a scrollbar.
This fix introduces a maximum constraint on the size of the overlay pane
during size calculation, where the maximum available vertical and
horizontal space is used as the constraint.
This is a quick approach and there are probably some things I've missed.
I haven't written any tests for this fix, and would like some help regarding
how to best write those tests, as well as fix two tests that broke because
of these changes.
Edit: Added a stackblitz with a reproduction
https://stackblitz.com/edit/components-issue-yusmdo?file=src/app/example-component.html
Open the 75vh overlay, scroll a bit in it and then scroll the body. The scroll in the overlay will reset to the top.
Open the 125vh overlay, scroll a bit in it and then scroll the body. The scroll in the overlay will not reset.