bug(bottomSheet): collision with CSS Filter on Chrome

[godind]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18

Description

After v19.2.4 upgrade, I have a resize/flicker while the bottomSheet slides into view. I've mange to narrow it down the css filters when they are applied to html or body element causing the issue. With css filters present on Chrome, when the BottomSheet appear, it resizes the view instead of sliding into view.

To reproduce: ng new filteproject. ng add @angular/material . Following the Material io example and add a BottomSheet and open button to the default project page.

Add backdrop-filter: brightness(1); to styles.css body

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; backdrop-filter: brightness(1); }

Trigger the bottomshett and you will a page flicker on Chrome. It works fine in Safari and worked fine in Angular 18 on Chrome.

If you add a DIV between body and app-root, and apply filters to it, the issue goes away. but BottomSheet and dialog are not affected by the filters anymore. I use filters to create dim the entire document or as a night mode feature.

Looks like its an overlay context issue or something. Not experienced enough to explain it better !

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-bapgtgzq?file=src%2Fapp%2Fapp.component.html
Steps to reproduce:

1. Click Open File button

Expected Behavior

The BottomSheet should slide into view from the bottom.

Actual Behavior

BottomSheet is added to the bottom of body but is visible right away. It then slides over body and resizes the page as it moves to it final position.

Environment

Angular CLI: 19.2.5
Node: 18.20.7
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.1902.5
@angular-devkit/build-angular 19.2.5
@angular-devkit/core 19.2.5
@angular-devkit/schematics 19.2.5
@angular/cdk 19.2.7
@angular/cli 19.2.5
@angular/material 19.2.7
@schematics/angular 19.2.5
ng-packagr 19.2.0
rxjs 7.8.2
typescript 5.8.2
zone.js 0.15.0

bottomsheetFlicker.mov

[angular-automatic-lock-bot]

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.}