CSS Scroll Snap - 在悬停时进行转换的儿童会导致 Chromium 浏览器出现卡顿效果

问：

当滚动浏览将属性应用于子项的滚动容器中的内容时，我能够使用在悬停时应用了 transform 属性的子元素创建这种不和谐/卡顿的效果。scroll-snap-align

在这里运行示例代码！

[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;
}

这似乎发生在 Chromium 浏览器中（在 Chrome、Brave 和 Edge 中测试），并且在 Firefox 中似乎完全正常工作。我还没有测试过 Safari。

想知道这是否是 Chromium 浏览器中滚动容器的已知怪癖/错误，或者是否存在针对此问题的某种解决方案。