Description
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:
- 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