@FluffyKas
Posted
Hiya,
What your trying here is pretty hard to pull off css wise and it's not really working well at the moment. If you check your solution again you can see the when the card flips you can still see the other side. Apart from this, your component functions pretty well and looks good, from what I can see.
There's a few other small bits you might wanna check out:
-
It's a nice habit to use landmarks, even if it's just a component. Judging from your other solutions you know this already.
-
Alt text are for people unable to see the images. I suggest you check this article out. But to sum it up, in this case you should just leave the alt text empty, as it's a decorative image. Adding an aria-hidden="true" won't hurt either ^^
@asi309
Posted
@FluffyKas Hi,
I did not understand the "you can still see the other side" comment. Which browser should I check this in? I cannot see the back side of the card on chrome. and backface-visibility is supported by all browsers as per MDN.
@FluffyKas
Posted
@asi309 @asi309 I'm sorry, I really should've specified the browser >.< Now i see it works well on Chrome. I'm using Firefox and unfortunately it doesn't work there. It's a nice habit to check your solution on multiple browsers, especially when doing something tricky like this.
You can definitely make it work on Firefox though. I used this flip animation in one of my old projects and it works just fine on most browsers. So I'm not sure where the problem might be with your solution. I leave the repo for that project, it may help.
Marked as helpful
@asi309
Posted
@FluffyKas It is a bug in firefox that was causing the issue. Basically, firefox requires the front side to have a rotate(0deg). Thanks for reporting the issue. :)
