css - スケール アニメーションの後に div のコンテンツが左にシフトする

Question

mouseOver と mouseLeave で scale() 変換 (react-spring を使用) を適用した後、元の scale(1) 位置に戻った後、div の内容が 1 または 2 ピクセル左にシフトする div があります。

div の動作の GIF

カード コンポーネントは次のとおりです (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;
  `}

`

そして、これがレンダリングされている場所です：

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>
  )
}

どんな洞察も深く感謝します!

編集: mouseOut スケールを 1.0前後、つまり 1.00001 または 0.99999 のままにしておくと、説明したように内容がシフトしないことを追加する必要があります。理想的には、このハックに頼らずにこれを修正したいのですが、このままにしておくと、パフォーマンスの低下が予想されますか?