Open liesahead opened 3 years ago
@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?
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.
Any suggestions for a workaround?
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 https://github.com/angular/components/pull/13466.
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.
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.
It's because the dialog transitions from
transform: scale(0.7)
totransform: none
. An element with atransform
creates a new stacking context forposition: fixed
elements. We could transition toscale(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!!
Reproduction
Use StackBlitz to reproduce your issue:
Steps to reproduce:
Expected Behavior
Element is positioned correctly when dialog opens.
Actual Behavior
Element jumps from one position to correct one.
Environment