图片网格出现异常滚动回退问题求助

滚动图片网格并移动光标时，出现滚动位置偶尔回退到稍早位置的异常情况。该问题仅在同时满足以下CSS属性组合时触发：

• .grid-item:hover 上设置任意 filter 属性
• .grid-item 上设置 aspect-ratio 属性
• .my-grid 上使用包含 repeat(auto-fill, minmax(...)) 的 grid-template（使用 repeat(4, 1fr) 这类静态值可避免问题）
• #app 上设置 display: flex;

触发场景 #

• 大多在图片未完全覆盖网格项（或差距较大）时出现
• 悬停屏幕顶部附近的网格项时
• 具体操作：将带有激活filter的悬停项滚动出视图后，再将光标移至另一个项悬停时

复现代码 #

CSS代码 #

.my-grid {
  border: 1px solid blue;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  overflow-y: scroll;
  height: 50svh;
}

.grid-item {
  border: 1px solid green;
  aspect-ratio: 9/16;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
  }
}

.grid-item:hover {
  filter: brightness(110%);
  cursor: pointer;
}

#app {
  display: inline-flex;
}

HTML代码 #

<div id="app">
  <div class="my-div">
    <div class="grid-item"> <img src="URL..." /> </div>
    <div class="grid-item"> <img src="URL..." /> </div>
    <div class="grid-item"> <img src="URL..." /> </div>
    ...
  </div>
</div>

注：边框仅用于示意。

内容的提问来源于stack exchange，提问作者Caio Hagge