Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The problem persists regardless of which card is tapped first. Any suggestions on where to start looking for a solution would be much appreciated. The site is live at 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;
               
              }
cssmobiletransformnext.jstransition

Answer №1

In my opinion, the issue stems from the event listener. Instead of using mouseenter/leave, when dealing with mobile devices you should switch to a onClick function. You may need to modify your current code or include an additional toggleFlip() function to ensure smooth functionality. - Aurélien B.

All recognition for this response belongs to Aurélien B. mentioned in the preceding comment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate a CSS class on an image upon hovering over a div (WordPress)

In my current setup, I have a loop that retrieves and displays posts using the following code: <div class="row" style="margin-bottom:50px;"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <a h ...

phpjqueryhtmlcsswordpress

To add a code snippet to the right side of a paragraph using CSS, place it at the end of the

Is there a way to insert code at the end of each paragraph and have it aligned to the right on the same line as the last sentence? Update: I initially tried using float:right, but encountered an issue with vertically aligning the code with the last line ...

htmlcss

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

Creating a responsive design for my website that will adapt to any device, whether it be a phone

As a beginner in HTML and CSS, I am currently working on creating a website for my project. However, one of the requirements is that it should be responsive. I have encountered an issue where my yellow box appears to be getting smaller while the red and ...

htmlcss

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4

Unable to locate image files stored in vendor/images in the Rails 4 view

I have successfully set up a custom bootstrap theme with Rails 4, and placed the image file here: /vendor/assets/images/custom_bootstrap_theme/demo/bg01.jpg The index.html.erb file is referencing this image as follows: <img src="/vendor/assets/image ...

cssruby-on-rails

Modifying CSS files in real-time

I've been attempting to dynamically change the CSS file, but I've run into an issue: Whenever I try to alter the style, it seems to work correctly while in "debug mode", showing that the changes are applied. However, once the JavaScript function ...

javascripthtmlcss

There are two separate CSS files linked to the same page, but the browser is only rendering the styles from

I am in the process of developing a new web page where I want to implement my own CSS and incorporate some components from this source: . I'm facing an issue with one of the components, as the browser seems to be applying only the styles from my custo ...

htmlcss

What could be causing this jQuery color picker to malfunction when used inside a Bootstrap modal?

Currently, I am utilizing the fantastic jQuery color picker provided by Although it functions as expected in "normal" scenarios, I have encountered an issue where the picker fails to display when the input parent element is nested within a Bootstrap 3 mod ...

javascriptjquerycsstwitter-bootstrap-3

What might be the reason behind the failure to implement my color class on the text within the <p> element?

I'm looking to streamline my stylesheet to easily change the color of different text elements. I've created a list of general colors that can be applied using classes, like (class="blue") . Here are some examples: .dark-grey { color: #232323; } ...

htmlcss

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

I have a single-page website built with Next.js. The home page, which displays a list of products, is located at route / and the corresponding code can be found in pages/index.js. Each product has an id, allowing users to jump directly to it using /#produc ...

javascriptreactjsnext.js

Position a div adjacent to a particular, changing Rails component once jQuery has toggled it

Within my Rails application (which is utilizing Bootstrap's grid system), I am featuring a blog post within the left column. On the right side, I have integrated a jQuery toggle effect to reveal a quick form for user interaction such as leaving commen ...

jquerycssruby-on-rails

Ways to apply CSS in jQuery using various combinators

I'm facing an issue with changing CSS using jQuery. The specific CSS line I want to modify is: .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside { top: 40px; } My attempt at changing it looked like this: $('.switch-vertic ...

javascriptjquerycss

Can anyone provide a reference or resource that explains the best scenarios for utilizing display:block, display:inline, and display:inline-block, and the reasons behind their usage?

Can you recommend a quality article discussing the guidelines for using display:block, :inline, and :inline-block in CSS, along with explanations on when to utilize each one? Additionally, in what scenarios should we override the display property through ...

cssxhtmlsemantic-markup

Tips for modifying the creation of NextJS route handler request object

Our Openlitespeed web server is causing issues with the parameter being sent to construct the request object in NextJS, leading to an error. import { type NextRequest } from 'next/server'; export function GET( request : NextRequest, { pa ...

next.jsapp-router

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

javascripthtmlcss

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

Next.js looks for images in its local directory, rather than on AWS

We've decided to switch our application over to Next.js from Create React App. However, we're encountering an issue where Next.js is not loading images from AWS as it should. This was working fine just a few days ago. Could it be a caching probl ...

reactjsamazon-web-servicesnext.jsnextjs-image

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

I am currently utilizing Tailwind CSS and I am struggling to display the white dropdown over my modal. Despite attempting to use the z-index, I have been unsuccessful in getting it to work. Do you have any suggestions or insights on how to resolve this is ...

htmlcssvue.jstailwind-cssheadless-ui

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

javascriptcssreactjsmaterial-ui