我正在尝试在页面上实现滚动捕捉。我已将scroll-snap-type 添加到容器元素，并将scroll-snap-align 添加到子部分。它在大屏幕上的 Chrome 上运行良好，在所有屏幕尺寸的 Firefox 上运行良好。然而，它似乎跳过了 Chrome 上较小屏幕上的部分。所以它会显示孩子 1、3、5 等等。代码如下：
.hero-pages {
height: 100vh;
scroll-snap-type: y mandatory ;
overflow-y: scroll;
}
.hero-page {
height: 100vh;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
scroll-snap-align: center;
scroll-snap-stop: always;
position: relative;
}<div className="homepage">
<Navbar></Navbar>
<div className="hero-pages">
<HeroPage index={0}></HeroPage>
<HeroPage index={1}></HeroPage>
<HeroPage index={2}></HeroPage>
<HeroPage index={3}></HeroPage>
<HeroPage index={4}></HeroPage>
<HeroPage index={5}></HeroPage>
</div>
</div>尝试使用 css 并更改值，但我不确定问题是什么。阅读关于导致问题的 chrome bug 的一些帖子，解决方案是添加一个包装容器，这就是我的代码所具有的。我正在使用 React 来设计页面。
谢谢。
编辑：添加了 gif 来帮助我解释行为：
Correct behaviour - Large external screen - Chrome:
Wrong behaviour - Laptop screen 14" - Chrome:
None