Z-index displays differently in chrome and firefox

Question

I have 2 components, navBar and wings animation, so the issue is that in chrome it works properly(navBar is under wings), but in fireFox navBar is on top of wingsAnimation I know that browsers have different engines but don't have enough exp to fix that

.navBarWrap {
  display: block;
  height: 120px;
  z-index: 2;
  position: absolute;
  width: 100%;
}

.wingWrap {
  position: relative;
  z-index: 100 !important;
  transform: translateY(10rem);
}