title: Angular 7 animations causes z-index overlapping issue on webkit browsers
body: <p>I have added some staggered animations to my angular 7 app for elements to animate on page load. I have encountered this weird z-index issue on one of my components. </p>
  
  <p>The animation code is this:</p>
  
  <pre><code>@Component({
    selector: 'track-page',
    templateUrl: './track-page.component.html',
    styleUrls: ['./track-page.component.scss'],
    animations: [
      trigger('fadeIn', [
        transition(':enter', [
          query('*', style({opacity: 0})),
          query('*', [
              animate('500ms', style({opacity: 1}))
          ]),
        ])
      ]),
      trigger('swipeUp', [
        transition('void =&gt; *', [
          query('*', style({opacity: 0, transform: 'translate3d(0,20%,0)'})),
          query('*', stagger(10, [
            animate('700ms ease-in', keyframes([
              style({opacity: 1, transform: 'none', offset: 1})
            ]))
          ]))
        ])
      ])
    ]
  })
  </code></pre>
  
  <p>This code causes the following result only on webkit browsers:
  <img src="https://i.ibb.co/MPwF9C0/Screenshot-2019-03-12-at-13-37-17.png"/></p>
  
  <p>The share component should appear in front of every other element however the metronome icon appears ontop. I have tried setting the max z-index on the share component but have had no luck.</p>