Javascript Angular 7动画在webkit浏览器上导致z索引重叠问题

我在angular 7应用程序中添加了一些交错动画，以便在页面加载时为元素设置动画。我在我的一个组件上遇到了这个奇怪的z索引问题

动画代码如下所示：

@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})
          ]))
        ]))
      ])
    ])
  ]
})

此代码仅在webkit浏览器上产生以下结果：

---

共享组件应该出现在每个其他元素的前面，但是节拍器图标出现在顶部。我尝试在共享组件上设置最大z索引，但没有成功。

我找到了一个解决方案，我尝试将我的translate3d更改为一个translateY，但没有效果。所以我设置了

transform:translate3d（0,0,1px）在本应具有最高z索引的共享组件上，共享组件现在在所有浏览器上正确覆盖其他元素。
该代码在第13行有一个错误、无效或意外标记。浏览器控制台中是否显示错误？此外，在该图像中，您圈出了一些内容，但未解释问题所在。发生了什么，还是没有发生？很抱歉，我不是有意添加可运行的代码段。我现在已经删除了它，但是动画没有错误。它的动画设置正确，但我留下了这个z索引问题。共享组件应该出现在任何其他元素的前面，但上面显示了节拍器图标。我真的没想到它可以运行，但它突出显示了一个错误的事实让我怀疑您是否在浏览器控制台中看到了任何错误。Angulars scss loader添加了供应商前缀，但我认为这不会发生在javascript端（角度动画）JFI上。我用overflow:hidden；到父元素