bug(mat-dialog): element with fixed position jumps when dialog opens.

[liesahead]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://stackblitz.com/edit/angular-eyckbt?file=src/app/dialog-overview-example-dialog.html

Steps to reproduce:

1. Just open dialog which contains element with fixed position inside it.

Expected Behavior

Element is positioned correctly when dialog opens.

Actual Behavior

Element jumps from one position to correct one.

Environment

• Angular: in stackblitz link
• CDK/Material: in stackblitz link
• Browser(s): Chrome v94
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 latest

[jelbourn]

@crisbeto I can see this jumping, and can see that's it's definitely related to the animation (NoopAnimationsModule fixes it). I'm not sure, though, what would be animating here that would affect a position: fixed element. Are we doing something that would change the offsetParent during the animation?

[crisbeto]

It's because the dialog transitions from transform: scale(0.7) to transform: none. An element with a transform creates a new stacking context for position: fixed elements. We could transition to scale(1) which will prevent the jump, but we've had issues in the past which caused the text inside the dialog to be blurry.

[liesahead]

Any suggestions for a workaround?

[crisbeto]

You can avoid the jump by setting a transform on the dialog, but I'm not sure if that's what you want since the element will still be positioned relative to the dialog container. https://stackblitz.com/edit/angular-eyckbt-b5j4ud?file=src%2Fstyles.scss

The other option would be to disable animations for the entire module using the NoopAnimationsModule instead of BrowserAnimationsModule, but that might not be desirable either. There's also a PR that allows for the dialog animation to be controlled using the config object, but it has been stuck for a while #13466.

[liesahead]

Thanks for the fast reply! Sadly, that #13466 would be the only one that's useful. I will probably go with the fade animation on the fixed elements.

Edit: tried to force transform to none with important flag for dialog container but it didn't work either.

Edit2: added a *ngIf="hasViewInited" with animation on element. Now element fades without jumping when dialog is opening.

[vanczatibor2]

I found a solution because for me the liesahead's answer did not solve the issue.


I am using flexlayout, but I am sure this can be solved by changing the "this.hasViewInited = true" to:
const element = document.getElementById("<the absolute components name>")
if(element){ element.style.display = 'flex' //or whatever you want. }
And also give display: none to your elements css code.

[firdausreza]

It's because the dialog transitions from transform: scale(0.7) to transform: none. An element with a transform creates a new stacking context for position: fixed elements. We could transition to scale(1) which will prevent the jump, but we've had issues in the past which caused the text inside the dialog to be blurry.

I had the similar problem, the difference is I had a sticky elements that always jumpy when MatDialog is opened. overriding the transform property to scale(1) solves the problem. Thank you!!