search

simeydotme / pokemon-cards-css

A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.
https://poke-holo.simey.me/
GNU General Public License v3.0
5.45k stars 507 forks source link

Backside/frontside glitching in Safari #10

Closed canpoyrazoglu closed 2 years ago

canpoyrazoglu commented 2 years ago

The effects look great!

However, on Safari 16.1 on Mac, it glitches and alternates rapidly between backside and frontside as I move the cursor:

https://user-images.githubusercontent.com/4348413/198997278-5e928e62-e594-4452-9670-97e6767462ac.mov

It occurs also when the card is expanded by tapping, so it's not isolated to thumbnails only.

On the same machine, Chrome and Firefox render perfectly.

simeydotme commented 2 years ago

Thanks, @canpoyrazoglu

It's something I've known about since it was a bit late to try and mitigate it ... I will get around to refactoring the code at some point and hope I can resolve the layering/gfx issues with Safari by changing the way the card's backside is rendered.

I'll leave this open as inspiration!

james-work-account commented 2 years ago

https://stackoverflow.com/questions/36451688/css-card-flip-in-safari/36451979#36451979 I'm not on an Apple device to test, but does adding -webkit prefixes fix this? Hopefully it should be a case of throwing the CSS you have in something like https://autoprefixer.github.io/ and it magically working

canpoyrazoglu commented 2 years ago

It's (almost totally) fixed with the latest PR. See My comment with video demoing a small yet not super-important issue.

simeydotme commented 1 year ago

I just pushed another commit where I've basically fixed all the Safari bugs except one thing that is a pure engine-limit. https://github.com/simeydotme/pokemon-cards-css/commit/2ff2a5a9c17424c21842af9d881011c76cda9a5e

Safari was, for some reason, not handling image sizes the same as FF/Chrome when only a single value was provided. The resolution was to explicitly set the x & y for all background image sizes.

I think I've also improved the performance on Safari a little by setting the transform: translateZ on each layer, it seems Safari can optimise the rendering better... or soemthing?

live @ https://poke-holo.simey.me/