UPDATE: to fix the above problem, all I had to do was assign this style rule to .react-card-front and .react-card-back: "transformStyle: initial".

[dishantsattvabit]

Yes, your mentioned solution #38 (comment) fixed in safari. but in my case it is break on chrome browser

[panzacoder]

@dishantsattvabit This also breaks for me and since this library is relying on style tags I can't seem to override this only on Safari. Did you find a solution?

[panzacoder]

For anyone stumbling across this in 2024, here is the (annoying) styles that I had to add to make this work in Safari and Chrome:

<ReactCardFlip
  cardStyles={{
    front: { zIndex: 'unset', transformStyle: 'initial' },
    back: { zIndex: 'unset', transformStyle: 'initial' }
  }}
  isFlipped={isFlipped}
  flipDirection="horizontal"
/>