Skip to content

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)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 12, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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