CSS animation causing z-index problems

Question

I have a weird conflict in my main.js file. I run a fade up animation on ".main-headline--left"

$('.main-headline--left').addClass('wow animated fadeInUp');

This works fine, but when I add a piece of code that makes nav-links active based on what page the user is on, the animation obstructs the logo which hangs off of the navbar (logo height > navbar fixed height). Here is that code:

if(location.pathname != "/") {
    $('.navbar-nav--split a[href^="/' + location.pathname.split("/")[3] + '"]').addClass('is-active');
} else $('.navbar-nav--split a:eq(0)').addClass('is-active');

I notice this only happens in Chrome. Is there perhaps a better way to organize my Javascript or a better way to write the code so that this problem is rectified?

Here is the css animation:

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
        transition: .1s transform, .1s opacity;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);     
    }
}

I did not explicitly set z-index on containing elements. However, setting a z-index of 9999 on both the logo navbar does not fix the problem.

Riddick

Extremely unclear, also even though the title is css animation there is no code to show what that animation is or what the relevent z-index is. – Progress

I've updated the question with the css animation used and the information about z-index in this case. This behavior may not have to do with z-index and may be a bug in Chrome, since these two pieces of code which have nothing to do with each other, cause my logo to be trimmed to the parent navbar container until the animation is finished running. – Riddick

It would be much easier if you included all the relevant HTML and CSS; enough to recreate the problem. Especially the is-active class. All I can say at the moment is that the opacity may be causing the issue as it messes with the z-layers. – Springer

The class is pretty basic, but involves custom made mixins that creates a line from a pseudo element on hover. I really don't think the problem would be solved from looking deep into the inner workings of the code, since 1) they are straightforward and this is a complex problem resulting from an interaction 2) the two code pieces work fine, independently, and 3) the two code pieces work fine in browsers other than Chrome. – Riddick

I am looking for information on Chrome bugs I suppose. I am wondering if anyone has had a similar problem when dealing with animations in Chrome. – Riddick

Interestingly I have fixed my problem, but not in the way that I would have like to. I changed my jQuery selector to $('.main-headline--left, .secondary-headline__title').addClass('wow animated fadeInUp'). This means that the element below the main headline is also fading up, and now I have no flickering on my logo element. The interactions are really interesting here – Riddick

If you could provide all your code in a workable demo, we can actually fix the problem. I don't think this will be a bug, just a simple layering issue which can be tweaked. At the moment, it's impossible to give you an answer. – Springer

Here is a jsfiddle: jsfiddle.net/35a87xbj/1 After much tinkering, I wasn't able to make this work in jsfiddle, but I tried my best. All of the code is at least there. I have realized that the transform on my anchor links and the transform on my headline, together, cause the blue logo to be cropped to the navbar until the animation is complete. – Riddick

Answer 1

today I ran into similar issue... I patched it by changing the value of animation-fill-mode for the class animated as below...

.animated
{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: initial; //Changed from both to initial 
animation-fill-mode: initial; /*Changed from both to initial
}

Notably, setting the animation-fill-mode to forwards was causing my issue...

animation-fill-mode: both inherits both forwards as well as backwards property, so my trillionth z-index element got hid under the millionth z-index element...

Setting it to initial worked for me.

Heida

this should be the right answer! I've been trying to fix this for hours... working like a charm ;) – Misstep

Solved it for me too. It was quite a head scratcher for me. Thanks! – Controvert

Answer 2

I found a fix to my problem, but I have no idea why this solution works. By adding "-webkit-backface-visibility: hidden;" to my logo element, my logo no longer gets cropped when the animation on my headline and the transition on my anchor's pseudo element are run on load. I was wondering whether anyone knows why this would fix this problem. My logo element never moves on the z axis. There is a jsfiddle in the comment section that shows the code

Riddick

Answer 3

@GughaG's answer is right if don't need forwards, but if you do need, try adding position: absolute -- fixed me right up!

Benford

Answer 4

The answers here did not initially make it clear that the transformed elements cannot be siblings of each other and still retain z-index layering. Therefore, a top, middle and bottom layer animating would flip/flop all over each other and other elements in the page, for example a modal popup.

What needs to happen is a wrapping control layer that is not animated but holds the z-index order of things.

i.e. from this:

<wrapper>
  <child-1 /> <- animated element bottom layer
  <child-2 /> <- animated element middle layer
  <child-3 /> <- animated element top layer
</wrapper>

To this:

<wrapper>
  <child-wrapper-1>
    <child-1 /> <- animated element bottom layer
  </child-wrapper-1>
  <child-wrapper-2>
    <child-2 /> <- animated element middle layer
  </child-wrapper-2>
  <child-wrapper-3>
    <child-3 /> <- animated element top layer
  </child-wrapper-3>
</wrapper>

Where child-wrapper 1 has z-index of 1, child-wrapper 2 has z-index of 2 etc. and are NOT animated.

Here is a working fiddle: https://jsfiddle.net/pingram3541/8rdx9u2w/show

Pandemonium

Answer 5

I ran into similar problem, i have a menu on mobile view and animations in hero section, in my next js app. I noticed if i turn off animations elements go back to following z-index, but if animation is running they come on top. My menu if opened on mobile, and animations are running, hero section show above menu, thus menu is unreachable.

For now i did not got any good solution, but i made a animationsOnOfff state variable globally for my app, and i make it false on opening menus, and implemented a mechanism to stop animations in hero section if this is false. Thus if user opens menu, its animation stop, making menu above hero section.

IO tried playing with z index. i given hero section z-index of 1 and 100 to menu, still no difference, animations go above anything that is visible to show themselves.

Chiao