search

AaronCCWong / react-card-flip

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

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". #117

Open dishantsattvabit opened 1 year ago

dishantsattvabit commented 1 year ago

Yes, your mentioned solution https://github.com/AaronCCWong/react-card-flip/issues/38#issuecomment-447589236 fixed in safari. but in my case it is break on chrome browser

panzacoder commented 3 months ago

@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 commented 3 months ago

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"
/>