search

shatran / card-react

React component for card https://github.com/jessepollak/card
MIT License
133 stars 65 forks source link

When you focus on the cvv field, the card flips but the back side of the card dissapears #23

Closed panbhag closed 7 years ago

panbhag commented 7 years ago

When you focus on the cvv field, the card flips but the back side of the card disappears. When it is flipping, I can see the back side of the card. But after it has flipped, I can just see the mirror image of the front side of the card.

jkstache commented 7 years ago

Same. makes it unusable. looking for fixes in PR's that were submitted all the way back in August.

jkstache commented 7 years ago

Here's a quick fix for you guys: 1) copy over the card.css into your own (I copy/pasted it from node_modules/card-react/lib/card.css) -- (you may want to prettify it) 2) search for the following css rule:

.jp-card .jp-card-back,
.jp-card .jp-card-front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    transition: all .4s linear;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;

and add z-index:3; to it.

Check out this PR for any additional z-index additions you may be missing: https://github.com/shatran/card-react/pull/13

shatran commented 7 years ago

Sorry for the delay, Iv'e added the fix in version 1.2.5