Content of div gets shifted to the left after a scale animation - css

Question

I have a div in which, after applying a scale() transform (using react-spring) to it on mouseOver and mouseLeave, the div's contents shift 1 or 2 pixels to the left after returning to the original scale(1) position.
Gif of div's behavior
Here's the Card component (using styled-components):
const Card = styled.div`
position: relative;
display: block;
width: 100%;
text-align: left;
margin: 16px 0 32px 0;
padding: 14px 24px 16px 24px;
border: 1px solid hsla(0, 0%, 92%, 1);
border-radius: 8px;
color: ${props => props.theme.black};
background: #fff;
transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
span {
font-family: ${props => props.theme.headerFont};
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.1em;
text-align: left;
color: #0c344b;
opacity: 0.45;
b {
font-size: 12px;
}
}
${media.tablet`
padding: 12px 30px 22px 30px;
`}
`
And here's where it's being rendered:
export default function Article({
date = '',
title = '',
timeToRead = '',
excerpt = '',
slug = ''
}) {
const [hover, setHover] = useState(false)
const props = useSpring({
transform: `scale(${hover ? 1.05 : 1})`,
borderRadius: `8px`,
boxShadow: `${hover ? `1px 1px 14px #ededed` : `0px 2px 8px #f0f0f0`}`,
config: {
mass: 1,
tension: 350,
friction: 40
}
})
return (
<Link to={slug}>
<animated.div style={props}>
<Card
onMouseOver={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<span>{date}</span>
<span
css={`
float: right;
`}
>
<b role="img" aria-label="Time to read">
🕙
</b>{' '}
{timeToRead} min
</span>
<h2
css={`
margin: 0;
font-weight: 800;
font-size: 1.4em;
padding: 4px 0 8px 0;
`}
>
{title}
</h2>
<p
css={`
margin: 0;
line-height: 26px;
font-size: 16px;
`}
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
</Card>
</animated.div>
</Link>
)
}
Any insight would be deeply appreciated!
EDIT: I should add that, if I leave the mouseOut scale around 1.0, i.e. 1.00001 or 0.99999, the contents do not shift as was described. Ideally I want to fix this without resorting to this hack, but if I leave it this way, should I expect a performance hit?