青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Safariでのバグ。z-indexとtransformの組み合わせにおるz軸での戦い

Safariで、

.layer1 {
  transform: rotateX(45deg)
}
.layer2 {
  z-index: 1;
}

rotateXさせている.layer1の上に.layer2を乗せたい時。

Chromeなどでは問題なかったのだが、Safariではなんと、.layer1が上に来る。

どうやら、Safariではz-indexよりtransformのz軸のほうが強いみたいです。(まあ3D空間で考えたら自然ではありますよね…)

なので、transform: translate-zとかで調整すると解決するっぽい。

webmanab-html.com

blog.webico.work

で、その理由は、

www.it-swarm.jp.net

stackoverflow.com

ちゃんとまだ理解しきれていないが、Stacking Context(重ね合わせコンテキスト)

developer.mozilla.org

の影響らしい。