I'm building an app that has the ability to flip cards, and as you hover over a card, the focused card should resize to 30vw, while the other cards resizes to 15vw. When you hover off of all the cards, they should all go back to their original 20vw.
There seems to be a problem in Safari once the first flip has occurred, the resizing does not work as expected (you can see it working fine before the first flip).
You can view an example of what I'm talking about here in Safari:
https://master.d35k32uc23ao8f.amplifyapp.com
How the resizing should perform
How it performs after the flip (incorrect)
If you view in Chrome you'll be able to see the cards flipping and resizing, just as expected.
As far as I can tell, the problem lies with the justify-content: start/flex-start. I've tried a myriad of flex/grid/float css solutions, but nothing seems to be able to fix the issue. For example, the div container is currently set to:
.test-div {
width: 100vw;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
Appreciate any help in advance, this is driving me insane!
Here's my component for the card:
import React, { useState } from "react";
import ReactCardFlip from "react-card-flip";
import TestCard from "./TestCard";
export default function Test() {
const [isFlipped, toggleFlip] = useState(false);
const [backGroundWidth, setBackgroundWidth] = useState({
onHover: "20vw",
offHover: "20vw",
id: null
});
const handleClick = () => {
toggleFlip(!isFlipped);
};
const hoverEffect = e => {
console.log(e.currentTarget);
const { id } = e.currentTarget;
const num = id.toString();
setBackgroundWidth({
...backGroundWidth,
offHover: "15vw",
onHover: "30vw",
id
});
};
const handleHoverOut = e => {
offHoverEffect(e);
};
const offHoverEffect = e => {
setBackgroundWidth({
offHover: "20.00vw",
onHover: "20.00vw",
id: null
});
};
// const offHover = () => {};
return (
<div>
<button
style={{ width: "50px", backgroundColor: "orange", color: "white" }}
onClick={handleClick}
>
Flip
</button>
<div className='test-div'>
<TestCard
handleHoverOut={handleHoverOut}
hoverEffect={hoverEffect}
isFlipped={isFlipped}
onHover={backGroundWidth.onHover}
offHover={backGroundWidth.offHover}
id={backGroundWidth.id}
divId={"1"}
color='blue'
/>
<TestCard
handleHoverOut={handleHoverOut}
hoverEffect={hoverEffect}
isFlipped={isFlipped}
onHover={backGroundWidth.onHover}
offHover={backGroundWidth.offHover}
id={backGroundWidth.id}
divId={"2"}
color='green'
/>
</div>
</div>
);
}
And the card itself:
import React from "react";
import ReactCardFlip from "react-card-flip";
export default function TestCard({
isFlipped,
onHover,
offHover,
id,
divId,
hoverEffect,
handleHoverOut,
color
}) {
return (
<ReactCardFlip isFlipped={isFlipped} flipDirection='horizontal'>
<div
onMouseOver={e => hoverEffect(e, "front")}
onMouseOut={handleHoverOut}
style={{
width: id === divId ? onHover : offHover,
backgroundColor: color,
color: "white"
}}
className='test-card'
id={divId}
>
Card should fit 20vw on hover.
</div>
<div
id={divId}
onMouseOver={e => hoverEffect(e, "front")}
onMouseOut={handleHoverOut}
style={{
width: id === divId ? onHover : offHover,
backgroundColor: color,
color: "white"
}}
className='test-card'
>
Card should fit 10vw off hover.
</div>
</ReactCardFlip>
);
}
