Angular 7 animations causes z-index overlapping issue on webkit browsers

Question

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.

The animation code is this:

@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 => *', [
        query('*', style({opacity: 0, transform: 'translate3d(0,20%,0)'})),
        query('*', stagger(10, [
          animate('700ms ease-in', keyframes([
            style({opacity: 1, transform: 'none', offset: 1})
          ]))
        ]))
      ])
    ])
  ]
})

This code causes the following result only on webkit browsers:

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.

Answer 1

I have found a solution, I tried changing my translate3d to just a translateY but it didn't make a difference. So I set transform: translate3d(0, 0, 1px); on the share component that was meant to have the highest z-index the share component now overlays every other element correctly on all browsers.