angular-ngrx-material-starter
angular-ngrx-material-starter copied to clipboard
tomastrajan
Layout messed up in Edge with Animation query `position: fixed`
Minimal reproduction of the bug with instructions:
Just open the demo app in Edge: elements overlaps among them and layout is completely messed up. Cannot test on Safari, please verify yourself.
Line affected: https://github.com/tomastrajan/angular-ngrx-material-starter/blob/425bdb831fabc70a03ef7f213b815a43994384dc/projects/angular-ngrx-material-starter/src/app/core/animations/route.animations.ts#L15
Other information:
To fix in Edge, changing the style position to static or relative will fix the layout and the scroll.
Because position: fixed helps a lot in Chrome and Firefox during the page transition: it skips pre-scrolling (or jumping), we should intercept if it is Edge at change the position value to something else:
query(':enter > *', style({ opacity: 0, position: isIEOrEdge ? 'relative' : 'fixed' }), {
Same happens in Safari. Whole layout is broken because there's still an inline style "position: fixed" from the animations ":enter" which is not removed from the DOM. I think it might be also possible that this is a bug with angular animation, because the prop from the animations was not removed from DOM. I haven't found a way to fix this.
Ok i've found a fix that works for me:
export const routeAnimations = trigger('routeAnimations', [
transition('* <=> *', [
query(':leave > *', style({opacity: 1, position: 'static'}), {
optional: true
}),
query(':enter > *', style({opacity: 0, position: 'fixed'}), {
optional: true
}),
query(':enter .route-animations-elements', style({opacity: 0}), {
optional: true
}),
sequence([
query(
':leave > *',
[
style({opacity: 1}),
animate(
'1500ms ease-in',
style({opacity: 0})
),
style({position: 'fixed'})
],
{optional: true}
),
query(
':enter > *',
[
style({
position: 'static',
opacity: 0
}),
animate(
'1500ms ease-out',
style({opacity: 1})
)
],
{optional: true}
),
query(':enter > *', [
style({position: 'static'})
],
{optional: true})
]),
query(
':enter .route-animations-elements',
stagger(50, [
style({transform: 'translate3d(0, 10%, 0)', opacity: 0}),
animate(
'150ms ease-in-out',
style({transform: 'translate3d(0, 0%, 0)', opacity: 1})
)
]),
{optional: true}
)
]),
]);
@dyingangel666 if it works in most reasonable browsers (eg Chrome, FF, Safari ,... ) then it would be great if you could open a PR so we can fix it for everyone ;)
