CSS Scroll Snap - Children with Transform on Hover Causes Janky Effect in Chromium Browsers

Question

When scrolling through content in a scroll container with the scroll-snap-align property applied to the children, I was able to create this jarring/janky effect with children elements that have a transform property applied on hover.

Running example code here!

HTML

<div class="app-container">
  <h1>Card Container:</h1>
    <div class="scroll-container">
      <div class="card">card 1</div>
      <div class="card">card 2</div>
      <div class="card">card 3</div>
      <div class="card">card 4</div>
      <div class="card">card 5</div>
      <div class="card">card 6</div>
      <div class="card">card 7</div>
      <div class="card">card 8</div>
      <div class="card">card 9</div>
      <div class="card">card 10</div>
    </div>
</div>

CSS

.card {
  border-radius: 12px;
  background-color: lightgrey;
  height: 150px;
  width: 250px;
  border: black solid 3px;
  display: grid;
  place-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  transition: 0.3s;
  user-select: none;
  scroll-snap-align: center;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
}

.scroll-container {
  width: 350px;
  height: 275px;
  border: black solid 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: scroll;
  gap: 20px;
  scroll-snap-type: y mandatory;
}

.app-container {
  display: grid;
  place-content: center;
  height: 100vh;
  width: 100vw;
}

This seems to happen in Chromium browsers (tested in Chrome, Brave, and Edge), and appears to work completely fine in Firefox. I have not tested Safari.

Wondering if this is a known quirk/bug with scroll containers in Chromium browsers or if there exists some sort of solution for this problem.