Fix backside z-fighting

[mxcop]

Hey again 👋 I fixed the issue #10

I saw an issue for webkit where the backside and frontside of the card were fighting for the front row seat :D

I managed to fix it using a simple transform (also tested it on my safari)
I cannot see any space between the cards at all even with this translation so I think it should be fine.

_{Maybe it's more of a temporary fix nevertheless this makes the safari experience a lot better :D
I forgot to pull main before commiting, hence the merge commit (will try to remember this for the future)}

[netlify]

✅ Deploy Preview for deck-24abcd ready!

Name	Link
🔨 Latest commit	f0b9a4a
🔍 Latest deploy log	https://app.netlify.com/sites/deck-24abcd/deploys/63603713acf8620008f9590f
😎 Deploy Preview	https://deploy-preview-11--deck-24abcd.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[simeydotme]

thanks @mxcop

I will check this out tonight!
I thought the the additional translateZ in the transform was something I tried before and it killed Firefox instead, but I don't see the issue anymore. Perhaps Firefox fixed it in a recent update... amazing.

I'll bring my Macbook home for testing.
Cheers man!

[canpoyrazoglu]

Just tested on MacBook Pro (Safari 16.1). The main issue is gone!

There is a slight glitch in Safari on V, V Star, Trainer Holo, and Trainer Gallery cards which manifests like a division of the effect both horizontally and vertically (it's hard to explain with words, see below video) that isn't present in Chrome but I confirm that the main problem is gone and despite the glitch I can personally say its totally usable on Safari now 🎊

almost.mov

(Related: #10)

[mxcop]

Just tested on MacBook Pro (Safari 16.1). The main issue is gone!

There is a slight glitch in Safari on V, V Star, Trainer Holo, and Trainer Gallery cards which manifests like a division of the effect both horizontally and vertically (it's hard to explain with words, see below video) that isn't present in Chrome but I confirm that the main problem is gone and despite the glitch I can personally say its totally usable on Safari now 🎊

almost.mov
(Related: #10)

I think this might be fixable using -webkit-gradient on top of normal gradients.
_{Haven't tried it yet}

[simeydotme]

Thanks both, yes I see the same.

It looks like the background-image layers are not stacked / blended correctly... as well as the background-position in Safari is not behaving the same as Chrome/FF ... will need to a spend a bunch of time debugging this in Safari. But it looks achievable after the zIndex resolution :)

Just need a bit of time on it.

[simeydotme]

I think this might be fixable using -webkit-gradient on top of normal gradients.

Not sure about this, gradients (linear/radial) have been pretty much supported since like 2014/15 on all browsers. And that syntax was not supporting full gradient spec as I remember... so it probably cannot handle the craziness these effects need 😆