Layout messed up in Edge with Animation query position: fixed

[davideas]

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:

angular-ngrx-material-starter/projects/angular-ngrx-material-starter/src/app/core/animations/route.animations.ts

Line 15 in 425bdb8

query(':enter > *', style({ opacity: 0, position: 'fixed' }), {

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' }), {

[dyingangel666]

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.

[dyingangel666]

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}
    )
  ]),
]);

[tomastrajan]

@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 ;)

[dyingangel666]

PR is open ;) Tested Chrome, Firefox, Safari, Edge and IE11