Flip card z-index overlap problem

[Spencer_Knisely]

Hi everybody.

Can’t seem to figure out why this flipcard interaction is breaking through the nav. It’s no good this way. I’d have to take it out if I can’t solve the problem.

I’ve got the Z-height of the nav at 10,000…but it doesn’t seem to matter how high I set that. It’s clearly not affecting anything the way I want.

Any ideas?

---

Here is my public share link: LINK
(how to access public share link)

[Stan (justAnotherDeveloper)]

hi @Spencer_Knisely this code should fix it. You can add it to embed or page setting (inside head) or site setting (inside head)

<style>
.flip-card__wrapper{
-webkit-transform: translate3d(0,0,0);
}
</style>

https://cln.sh/LecHp3

Hope that will help

[Spencer_Knisely]

Amazing. Perfect.

ELI5 why that worked? I guess I’m going to have to read about ‘translate3d’.

Really appreciate your assistance.

[Stan (justAnotherDeveloper)]

HI @Spencer_Knisely I really do not know how to ELI5 this CSS principle. The problem is how Safari deal with stacking context and it need good understanding of CSS. I’m saying good as it is related to stacking context but it is actually basic thing you should know when you work with CSS.

Beside the way I have posted there can be also used another way with use of translateZ(0px)

<style>
.flip-card__wrapper{
    -webkit-transform: translateZ(0px);
}
</style>

Fixing issue in Safari with this approach using CSS function translateZ() on parent element is to create elements own rendering layer this mean changing stacking context but it can cause problems if you need to have translateZ() with different value than 0px.

I know that is not ELI5 but I have tried