search

AaronCCWong / react-card-flip

React component for card flipping animation.
https://aaronccwong.github.io/react-card-flip
MIT License
342 stars 64 forks source link

When card is flipped, the new back side shows on top of the new front side reversed #62

Closed shush-lu closed 2 years ago

shush-lu commented 4 years ago

It's a great library! I had a small glitch when using it. When flipping, the back side is reversed and showed on top of the new front side briefly (~0.5 - 1s). Per https://stackoverflow.com/questions/59716761/flip-card-bug-safari, a translateZ(1px) can fix that issue. I submitted a PR. Could you take a look?

AaronCCWong commented 2 years ago

Apologies for the delay and thanks for sending the PR. Merged.

shush-lu commented 2 years ago

thx. no worries

sbhaya commented 1 year ago

I am still facing the same issue

oyalhi commented 1 year ago

In my case I have to apply display flex, and if the page requires scrollbars Safari stops working. Works fine if scrollbars are not required.

  .react-card-front,
  .react-card-back {
    display: flex;
  }

having this did not help either:

  .react-card-back {
    transform: translateZ(1);
    -webkit-transform: translateZ(1);
    -moz-transform: translateZ(1);
    -ms-transform: translateZ(1);
  }

https://github.com/AaronCCWong/react-card-flip/assets/57917316/6f11a3ed-0a93-4e84-85a3-19473d5e5ef0