Chrome opacity transition z-index issue

Question

I'm working on an angular app and I'm having an issue when adding a '.active' class to a nav item.

Here is a stackblitz link that demonstrates the issue:

https://stackblitz.com/edit/angular-jjqyft?file=app%2Fapp.component.css

Basically, when I click a box, it scales but part of the next box is showing, almost like the active box is transparent. My active class has a z-index of 1 and an opacity of 1.

On Firefox, this doesn't seem to be an issue. Also, I've done something similar using the same technique before (but without any frameworks). This link will show you an example from that project.

I'm not sure if I'm doing something wrong or if it's a Chrome issue. I appreciate any feedback.

EDIT: Just checked on Edge and the same issue is there. So far it seems like Firefox is the only browser where this issue doesn't exist.

Answer 1

Just add position:relative to either the .section a or .active

Such as:

.section a {
  display: block;
  width: 120px;
  height: 80px;
  opacity: .5;
  transition: all .5s;
  position:relative;
}

The reason the clicked element seems as if it has opacity <1 is that the next element is actually "above" it, while having opacity: 0.5; . By "above it" I mean that the next element is further down the DOM tree, hence having a higher stacking order than the previous (currently the clicked one).