Skip to content

fix(material/bottom-sheet): page jumping if backdrop-filter is applied #30840

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 11, 2025

Conversation

crisbeto
Copy link
Member

The bottom sheet has an animation where it starts off-screen and animates in. At the same time it moves focus into itself. It seems like under certain conditions (e.g. having backdrop-filter on the body) this causes the entire page the jump in a jarring way due to the focus being moved.

These changes resolve the issue by telling the browser not to scroll the page when moving focus.

Fixes #30774.

The bottom sheet has an animation where it starts off-screen and animates in. At the same time it moves focus into itself. It seems like under certain conditions (e.g. having `backdrop-filter` on the `body`) this causes the entire page the jump in a jarring way due to the focus being moved.

These changes resolve the issue by telling the browser not to scroll the page when moving focus.

Fixes angular#30774.
@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Apr 10, 2025
@crisbeto crisbeto requested a review from a team as a code owner April 10, 2025 07:43
@crisbeto crisbeto requested review from mmalerba and andrewseguin and removed request for a team April 10, 2025 07:43
@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Apr 11, 2025
@crisbeto crisbeto removed the request for review from andrewseguin April 11, 2025 20:47
@crisbeto crisbeto merged commit 5dcbba7 into angular:main Apr 11, 2025
23 of 25 checks passed
@crisbeto
Copy link
Member Author

The changes were merged into the following branches: main, 19.2.x

crisbeto added a commit that referenced this pull request Apr 11, 2025
#30840)

The bottom sheet has an animation where it starts off-screen and animates in. At the same time it moves focus into itself. It seems like under certain conditions (e.g. having `backdrop-filter` on the `body`) this causes the entire page the jump in a jarring way due to the focus being moved.

These changes resolve the issue by telling the browser not to scroll the page when moving focus.

Fixes #30774.

(cherry picked from commit 5dcbba7)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/bottom-sheet target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(bottomSheet): collision with CSS Filter on Chrome
2 participants