Next.js: 3 card flips but only 1 malfunctions - css

Question

just want to quickly thank the community at large for having helped me out many times already. You're all generous and helpful beyond measure. This is also my first post so I apologize if I forget to include anything.
I am currently a self-taught amateur web-developer attempting my first real project. I am using Next.js and am favoring server side rendering. So far everything has gone well, but while testing responsiveness I noticed that 1 of the 3 flip cards I'm using is displaying its back-face slightly too early. Also, this early back-face display only occurs when the window is over 1600px wide and is most easy to replicate on Chrome browsers.
The most confusing part of this is that from what I can tell, all 3 of my flip cards should be exactly the same, yet only one is having issues. Just to clarify, I've placed a flip card component inside of a slider component, hence the two code blocks
incoming code-wall:
Outer "slider" component
import React from 'react';
import SoloContent1 from './SoloContent1';
import SoloContent2 from './SoloContent2';
import SoloContent3 from './SoloContent3';
import CloseButton from './CloseButton';
export default class SliderSolo extends React.Component {
constructor(props) {
super(props);
this.state={
slide1: "slide1",
slide2: "slide2",
slide3: "slide3",
slideClass: "slide3",
}
this.slideLeft = this.slideLeft.bind(this);
this.slideRight = this.slideRight.bind(this);
};
slideRight() {
if (this.state.slideClass === this.state.slide1)
{
this.setState({ slideClass : this.state.slide2 })
}
else if (this.state.slideClass === this.state.slide2)
{
this.setState({ slideClass : this.state.slide3 })
}
else if (this.state.slideClass === this.state.slide3)
{
this.setState({ slideClass : this.state.slide1 })
}
}
slideLeft() {
if (this.state.slideClass === this.state.slide1)
{
this.setState({ slideClass : this.state.slide3 })
}
else if (this.state.slideClass === this.state.slide3)
{
this.setState({ slideClass : this.state.slide2 })
}
else if (this.state.slideClass === this.state.slide2)
{
this.setState({ slideClass : this.state.slide1 })
}
}
render() {
if (this.props.show === true) {
return (
<div className="slider">
<div className={this.state.slideClass} >
<SoloContent1 />
<SoloContent2 />
<SoloContent3 />
</div>
<button id="goLeft" onClick={this.slideRight}><i className="ChevronLeft" id="left"></i></button>
<button id="goRight" onClick={this.slideLeft}><i className="ChevronRight" id="right"></i></button>
<a onClick={this.props.onClose} id="closeLink"><CloseButton id="close" /></a>
<style jsx>
{`
.ChevronLeft {
position: absolute;
height: 75px;
width: 75px;
z-index: 10;
transform: rotate(90deg)
}
.ChevronRight {
position: absolute;
height: 75px;
width: 75px;
z-index: 10;
transform: rotate(-90deg)
}
#left {
right: 40px;
top: 0px;
}
#right {
right: -40px;
top: -5px;
}
.ChevronLeft::before,
.ChevronLeft::after {
position:absolute;
display:block;
content:"";
border:35px solid transparent;
}
.ChevronLeft::before {
border-top-color:#b00;
}
.ChevronLeft::after {
top:-10px;
border-top-color:#fff;
}
.ChevronRight::before,
.ChevronRight::after {
position:absolute;
display:block;
content:"";
border:35px solid transparent;
}
.ChevronRight::before {
border-top-color:#b00;
}
.ChevronRight::after {
top:-10px;
border-top-color:#fff;
}
#closeLink {
position: absolute;
width: 25px;
height: 25px;
cursor: pointer;
right: 6%;
top: 2%;
}
#media (max-width: 720px) {
#closeLink {
top: 45px;
right: 40px;
}
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 75px;
height: 75px;
background: none;
border: none;
cursor: pointer;
}
button:focus {
outline: none;
box-shadow: none;
}
#goLeft {
left: 5.5%;
}
#goRight {
right: 5.5%;
}
.slider {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
margin-top: 130px;
min-width: 450px;
}
i {
font-size: 2vw;
}
.slide1 {
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
}
#media (max-width: 720px) {
.slide1 {
height: 75vh;
margin-top: 6%
}
}
.slide2 {
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
transform: translateX(100%)
}
#media (max-width: 720px) {
.slide2 {
height: 75vh;
margin-top: 6%
}
}
.slide3 {
position: relative;
width: 100%;
height: 60vh;
transition: 0.5s;
margin: auto;
transform: translateX(200%)
}
#media (max-width: 720px) {
.slide3 {
height: 75vh;
margin-top: 6%
}
}
`}
</style>
</div>
);} else {
return null;
}
}
}
Inner "flip card" component
import React from 'react';
class SoloContent1 extends React.Component {
constructor(props) {
super(props);
this.state={
className1: "flipCard",
className2: "flipCard",
className3: "flipCard",
}
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" })
}
unflip1() {
this.setState({ className1 : "flipCard" })
}
flip2() {
this.setState({ className2 : "flipCard is-flipped" })
}
unflip2() {
this.setState({ className2 : "flipCard" })
}
flip3() {
this.setState({ className3 : "flipCard is-flipped" })
}
unflip3() {
this.setState({ className3 : "flipCard" })
}
render() {
return (
<div id="contentContainer">
<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="soloPro1"
style={{
backgroundImage: "url(" + `${require("../public/assets/img1.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style={{
backgroundImage: "url(" + `${require("../public/assets/img1.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
}}>
</div>
<p className="cardText">Card 1 Back</p>
</div>
</div>
</div>
<div className="flipCardContainer" id="flipContainer2" onMouseEnter={this.flip2} onMouseLeave={this.unflip2}>
<div className={this.state.className2} id="card2">
<div className="card__face card__face--front" id="soloPro1"
style={{
backgroundImage: "url(" + `${require("../public/assets/img2.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style={{
backgroundImage: "url(" + `${require("../public/assets/img2.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
}}>
</div>
<p className="cardText">Card 2 Back</p>
</div>
</div>
</div>
<div className="flipCardContainer" id="flipContainer3" onMouseEnter={this.flip3} onMouseLeave={this.unflip3}>
<div className={this.state.className3} id="card3">
<div className="card__face card__face--front" id="soloPro1"
style={{
backgroundImage: "url(" + `${require("../public/assets/img3.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
</div>
<div className="card__face card__face--back" id="soloPro2">
<div style={{
backgroundImage: "url(" + `${require("../public/assets/img3.jpg")}` + ")",
width: "100%",
height:"100%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
filter: "blur(8px)",
}}>
</div>
<p className="cardText">Card 3 Back</p>
</div>
</div>
</div>
</div>
<style jsx>
{`
.cardText {
position: absolute;
height: 100%;
width: 100%;
transform: translateY(-65%)
}
#contentContainer {
position: absolute;
height: 100%;
width: 90%;
background-image: url('image');
background-color: rgb(192,192,192);
border-radius: 8px;
transform: translateX(0%);
right: 5%;
overflow: hidden;
border: 5px solid silver;
box-sizing: border-box;
}
#media (max-width: 720px) {
#contentContainer {
height: 100%;
min-height: 575px;
overflow: hidden;
}
}
.contentCanvas {
z-index: 1;
height: 100%;
width: 100%;
margin: auto;
margin-top: 0%;
}
#media (max-width: 720px) {
.contentCanvas {
transform: translate(0, 0%);
min-height: 525px;
height: 102%;
width: 100%;
margin-top: 0%;
}
}
.flipCard {
margin: auto;
list-style: none;
font-size: 1.6em;
width: 100%;
height: 100%;
padding: 0;
display: inline-block;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
}
#media (max-width: 720px) {
.flipCard {
width: 100%;
height: 100%;
}
}
.card__face {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.card__face--front {
background: white;
}
.card__face--back {
background: black;
transform: rotateY( 180deg );
}
.flipCard.is-flipped {
transform: rotateY( 180deg );
}
#media (max-width: 720px) {
.card__face--back {
background: black;
transform: rotateX( 180deg );
}
.flipCard.is-flipped {
transform: rotateX( 180deg );
}
}
#card1 {
}
#media (max-width: 720px) {
#card2 {
margin-top: -1%
}
}
#media (max-width: 720px) {
#card3 {
margin-top: -1%
}
}
.flipCardContainer {
perspective: 40rem;
z-index: 1;
height: 100%;
width: 33.333333333333333333333333%;
margin: auto;
display: inline-block;
}
#media (max-width: 720px) {
.flipCardContainer {
width: 100%;
height: 33%;
margin-top: 0%;
}
}
`}
</style>
</div>
);
}
}
export default SoloContent1;
Any and all help is appreciated. Also please don't be afraid to criticize my work. This is my first project after all and the last thing I want is to continue developing bad habits. Thank you all in advance.

Answer 1

In the end I was never able to figure out what was causing the issue. Though I discovered it was directly linked to the pixel width of the viewable window, regardless of which container the element was nested in. Also, beyond a certain width the issue began to pop up in the other flip cards.
Sorry I can't offer a real solution, though I did manage to get around it by causing the backface of each flip card to fade in as it flips.