Open J0914 opened 2 years ago
I ran into a similar error a few days ago. There was a glitch where I would click on the object and the opposite side would show backwards.
TLDR;
The glitch was solved for me was when css overflow
property was set to hidden: overflow: hidden;
My original code was as follows: React:
<ReactCardFlip isFlipped={isFlipped} flipDirection='horizontal'>
{/* Front side*/}
<StyledCodeCard onClick={handleClick}>
<h2>FRONT SIDE</h2>
</StyledCodeCard>
{/* Back Side side*/}
<StyledCodeCard onClick={handleClick}>
<h3>BACK SIDE</h3>
</StyledCodeCard>
</ReactCardFlip>
and my css within styled component:
export const StyledCodeCard = styled.div`
background-color: #fff;
padding: 10px;
border-radius: 15px;
margin: 45px 75px;
width: 400px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
&:hover {
cursor: pointer;
transform: scale(1.2);
transition: transform 0.3s;
}
`;
My h2 tag was too big so there was overflow.
When I changed my css to add overflow: hidden;
the problem was solved:
export const StyledCodeCard = styled.div`
background-color: #fff;
overflow: hidden; {/* NEW TO FIX OVERFLOW*/}
padding: 10px;
border-radius: 15px;
margin: 45px 75px;
width: 400px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
&:hover {
cursor: pointer;
transform: scale(1.2);
transition: transform 0.3s;
}
`;
The problem was solved after that addition. Hope it helps!
Thank you!!!
This has happened in the last couple of months.