Flipcard on mobile - First tap doesn't work - css

Question

Working in Next.js. Currently trying to debug the mobile version of a site I'm working on. Just have a tiny hitch, the first flip-card tapped in mobile refuses to flip. If I tap multiple times on this "stubborn" card, it selects the text on the opposite side of the card. If I tap a different card, it flips properly. It doesn't matter which card I tap first, the result is that the initially tapped card doesn't flip (until I tap other cards and try again). This is a very confusing issue and I would appreciate even a direction to start looking in. Site currently running on d20dev.com
class SoloContent1 extends React.Component {
constructor(props) {
super(props);
this.state={
className1: "flipCard",
className2: "flipCard",
className3: "flipCard",
fadeOneA: "unFade",
fadeOneB: "fade",
fadeTwoA: "unFade",
fadeTwoB: "fade",
fadeThreeA: "unFade",
fadeThreeB: "fade",
}
this.flip1 = this.flip1.bind(this);
this.unflip1 = this.unflip1.bind(this);
this.flip2 = this.flip2.bind(this);
this.unflip2 = this.unflip2.bind(this);
this.flip3 = this.flip3.bind(this);
this.unflip3 = this.unflip3.bind(this);
}
flip1() {
this.setState({ className1 : "flipCard is-flipped", fadeOneA : "fade", fadeOneB : "unFade" })
}
unflip1() {
this.setState({ className1 : "flipCard", fadeOneA : "unFade", fadeOneB : "fade" })
}
flip2() {
this.setState({ className2 : "flipCard is-flipped", fadeTwoA : "fade", fadeTwoB : "unFade" })
}
unflip2() {
this.setState({ className2 : "flipCard", fadeTwoA : "unFade", fadeTwoB : "fade" })
}
flip3() {
this.setState({ className3 : "flipCard is-flipped", fadeThreeA : "fade", fadeThreeB : "unFade" })
}
unflip3() {
this.setState({ className3 : "flipCard", fadeThreeA : "unFade", fadeThreeB : "fade" })
}
render() {
return (
<div id="contentContainer">
<div className="contentCanvas contentCanvas--card">
<div className="contentCanvas contentCanvas--card">
<div className="flipCardContainer" id="flipContainer1" onMouseEnter={this.flip1} onMouseLeave={this.unflip1}>
<div className={this.state.className1} id="card1">
<div className="card__face card__face--front" id={this.state.fadeOneA}
style={{
backgroundImage: "url(" + `${require("../public/assets/JPG.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id={this.state.fadeOneB}>
<div style={{
backgroundImage: "url(" + `${require("../public/assets/JPG.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(20px)",
}}>
</div>
<p className="cardText" id="cardText1">TEXT</p>
</div>
</div>
</div>
</div>
</div>
.cardText {
position: absolute;
height: 100%;
width: 80%;
transform: translateY(-105%);
}
#cardText1 {
text-align: right;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 75%;
color: white;
font-size: calc(12px + 1.3vw);
text-shadow: 2px 2px 2px black;
}
#cardText2 {
text-align: center;
width: 90%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: calc(12px + 1.3vw);
text-shadow: 2px 2px 2px black;
}
#cardText3 {
text-align: left;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 75%;
color: white;
font-size: calc(12px + 1.1vw);
text-shadow: 2px 2px 2px black;
}
#contentContainer {
position: absolute;
height: 100%;
width: 100%;
background-image: url('image');
background-color: rgb(192,192,192);
border-radius: 8px;
transform: translateX(-225%);
overflow: hidden;
border: 5px solid silver;
box-sizing: border-box;
}
.contentCanvas {
z-index: 1;
height: 100%;
width: 100%;
margin: auto;
margin-top: 0%;
}
.flipCard {
margin: auto;
list-style: none;
font-size: 1.6em;
width: 100%;
height: 100%;
padding: 0;
display: inline-block;
transition: transform 0.5s;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
}
.card__face {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.card__face--front {
background: white;
overflow: hidden;
}
.card__face--back {
background: black;
transform: rotateY( 180deg );
overflow: hidden;
}
.flipCard.is-flipped {
transform: rotateY( 180deg );
}
#card1 {
}
.flipCardContainer {
perspective: 40rem;
z-index: 1;
height: 100%;
width: 33.333333333333333333333333%;
margin: auto;
display: inline-block;
}

Answer 1

To me the problem comes from the event listener. Instead of having
mouseenter/leave, when being on mobile you should have a function
onClick. Then you would need to either change your current code or add
an extra toggleFlip() function to make it work nicely. – Aurélien B.
All credit for the answer goes to Aurélien B. in the comment above.