Chromeの不透明度の遷移Zインデックスの問題

Question

角度アプリで作業していて、ナビアイテムに '.active'クラスを追加するときに問題が発生しています。ここで

が問題を示していstackblitzリンクです：

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

基本的に私は、ボックスをクリックしたとき、それはスケールが、次のボックスの一部は、アクティブなボックスは透明であり、ほとんどのように、表示されます。私のアクティブなクラスのZ-インデックスは1、不透明度は1です。

Firefoxでは、これは問題ではないようです。また、前と同じテクニックを使用して同様のことをしました（フレームワークなし）。このlinkはそのプロジェクトの例を示します。

私が何か間違っているのか、それともChromeの問題なのかわかりません。私はフィードバックを感謝します。

EDIT：Edgeでチェックしても同じ問題があります。これまでのところ、Firefoxがこの問題が存在しない唯一のブラウザだと思われます。

Answer 1

だけのような.section aまたは.active

のいずれかにposition:relativeを追加します。それは、不透明度< 1を持っているかのようにクリックされた要素は思わ理由は次の要素が実際に「上」であるということです

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

それはopacity: 0.5;を持っています。 「上にある」とは、次の要素がDOMツリーのさらに下にあることを意味し、したがって、以前のクリック（現在クリックされているもの）よりも高いスタック順序を持つことを意味します。