React滚动组件断断续续，列表项目仅在笔记本电脑显示器上消失

Question

我的组件是一个样式为overflow-y: scroll的基本div。子元素是一个带有display: flex;的ul，并且每个列表项只有position: relative

我的滚动组件项目闪烁和断断续续，有些项目无法显示。这种情况发生在滚动上，但一旦你滚动了一点，口吃就会永久性地存在。即使在刷新后，然后滚动，它也会继续

最奇怪的部分是：我的Macbook Pro连接到了第二个显示器。一旦我将浏览器窗口从笔记本电脑显示器拖动到第二个显示器，行为就会停止！向后移动通常会让口吃的人很快恢复

我们最近更改了css，这就开始了。我在本地启动了旧代码，这种行为已经消失了。我们移除了一个组件，并只放置了<div与overflow-y: scroll，除此之外，只有CSS发生了更改。当使用Element Inspector选择列表项时，带阴影的选定蓝色区域也会断断续续(chrome devtools(。有什么想法吗？这简直要了我的命！

CSS：

.listContainer {
height: 100%;
padding-top: 8px;
padding-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
@include query(mobile) {
margin-top: 128px;
}
}
.listContainer::-webkit-scrollbar {
/* WebKit */
width: 0;
height: 0;
}
.list {
@include reset-list;
display: flex;
flex-direction: column;
row-gap: $grid-2;
width: 100%;
}
.item {
position: relative;
}

<div className={s.listContainer}>
<ul className={s.list}>
{filteredProjects
.map((project, index) => (
<li
className={s.item}
key={project.id}
>
{...code with buttons, text, image, etc.}
</li>
</ul>
</div>

Answer 1

我联系了另一位以前有过这种情况的开发人员，他的解决方案是完全关闭chrome(这意味着手动关闭所有打开的选项卡，这样chrome就不会自动恢复你的浏览器会话(，然后关闭他的笔记本电脑(我们都有Mac M1(，让它静置一个小时左右。

这对我也起到了作用。当你在几个浏览器会话中打开了很多选项卡，并且几个月没有正确关闭电脑时，Chrome中似乎有一个错误导致了这种断断续续和闪烁(我知道这总体上很糟糕(。

因此，如果你看到这种情况，请让Chrome休息，并在关闭和重新启动计算机后使用干净的未还原会话重新启动。