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.

That code has an error, invalid or unexpected token on line 13. Does an error show in your browser's console? — Andy G, Mar 12 '19 at 13:45
Also, in that image you have circled something but not explained what the issue is. What happens, or doesn't happen? — Andy G, Mar 12 '19 at 13:49
Sorry I did not mean to add a runnable snippet. I have removed it now but no there is no error with the animation. It animates correctly but I am left with this z-index problem. The share component should appear in front of any other element but has the metronome icon displayed above it. — Jack_b_321, Mar 12 '19 at 13:50
I didn't really expect it to be runnable, but the fact that it highlighted an error caused me to question whether you saw any error in your browser's console. — Andy G, Mar 12 '19 at 13:53
The animation code runs the way I want it to with no errors but I am left with overlapping elements after the animation has completed, — Jack_b_321, Mar 12 '19 at 13:55
Have you inspected the metronome in your browser to discover where it comes from, and where it sits in relation to your component? — Andy G, Mar 12 '19 at 13:56
I have found a solution. Angular when compiling the animations must not add the -wekit-transform property into the css which meant on webkit browsers it didn't function correctly. I have added the webkit transform properties to my css and it worked. — Jack_b_321, Mar 12 '19 at 14:11
I am glad you resolved? Is Angular supposed to add vendor prefixes automatically? I know that there are libraries that can do this, don't believe it is inbuilt though. Anyway... — Andy G, Mar 12 '19 at 14:14
Angulars scss loader adds vendor prefixes but I don't think this happens on the javascript side (angular animations) — Jack_b_321, Mar 12 '19 at 14:15

Jack_b_321 · Accepted Answer · 2019-03-12T17:02:09.150

2

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.

edited Mar 12 '19 at 17:02

answered Mar 12 '19 at 14:13

Jack_b_321

848
8
22

JFI I worked it out with overflow: hidden; to the parent element – Whisher Jun 18 '20 at 10:26

score 1 · Answer 2 · edited Jul 28 '21 at 10:08

I had similar problem with z-indexes and animations (items with indexes > 0 was overlapping component during the transition), and this article was very helpful. You just have to set z-index in style for before and after the animation. Don't forget position: relative to make the z-indexes work.

transition(
    "void => prev", // ---> Entering --->
    [
        // In order to maintain a zIndex of 2 throughout the ENTIRE
        // animation (but not after the animation), we have to define it
        // in both the initial and target styles. Unfortunately, this
        // means that we ALSO have to define target values for the rest
        // of the styles, which we wouldn't normally have to.
        style({
            left: -100,
            opacity: 0.0,
            zIndex: 2
        }),
        animate(
            "200ms ease-in-out",
            style({
                left: 0,
                opacity: 1.0,
                zIndex: 2
            })
        )
    ]
),

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

2 Answers2