在Angular 7中，当使用动画在WebKit浏览器上导致z-index重叠问题时，可以尝试以下解决方法：

1. 使用will-change属性：将要执行动画的元素的CSS样式中添加will-change属性并设置为transform或opacity。这将通知浏览器该元素将会产生动画效果，并在渲染过程中优化它。例如：

.element {
  will-change: transform;
}

2. 使用transform属性：对于需要进行动画的元素，使用transform属性进行移动或缩放而不是top、left或z-index等属性。这样可以避免z-index重叠问题。例如：

.element {
  transform: translateX(100px);
}

3. 使用Angular动画的query函数：在动画定义中，使用query函数来控制元素的渲染顺序。通过将需要执行动画的元素放在query函数中并设置一个较高的stagger值，可以确保它们在其他元素之上渲染。例如：

import { trigger, style, animate, query, stagger } from '@angular/animations';

@Component({
  animations: [
    trigger('myAnimation', [
      transition('* => *', [
        query('.element', [
          style({ opacity: 0, transform: 'translateX(-100px)' }),
          stagger(100, [
            animate('500ms ease-out', style({ opacity: 1, transform: 'none' }))
          ])
        ])
      ])
    ])
  ]
})

以上是几种可能的解决方法，具体使用哪种方法取决于你的项目需求和实际情况。